You will learn about vue fundamentals and also learn how they work in this article, If you have difficulties understanding any concept explained here, kindly refer to the documentation. This article is only based on Vue 2 because most of the codebases out there are still Vue 2 codebases. However, I intend to add an extra to this series that explains how to migrate a Vue 2 app to a Vue 3 app.
What is vue js and why use it?
Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable, meaning that developers can integrate it into existing projects or use it for new projects. Vue.js is known for its simplicity, ease of use, and flexibility.
Reactivity is one of the main advantages of Vue.js; it allows changes made to the data to automatically update the user interface. As a result, developers may create more intricate and dynamic applications without worrying about manually updating the DOM.
Additionally, Vue.js has a manageable learning curve, making it a great option for developers of all experience levels. It also has a sizable and vibrant community that offers a multitude of services and assistance.
Setting up your development environment?
First things first, do you have Vue installed on your PC?(Personal computer) If yes, great! If you haven't, don't panic. Here's a guide from the vue docs on how to install vue js.
Creating your first VueJS application
//There's no need to add the square bracket.
vue create [name-of-project]
Run the code above on your terminal, and you will be prompted with a few questions asking which method you prefer for the app's creation. I'd suggest you go with manual installation to better choose what is needed and what is not. Once you are done with the step above, you should have your project created.
cd [name-of-project]
CD into the project and open it in your preferred IDE. Awesome! You have created your first Vue application.
Understanding components and their roles in Vue.js
The idea behind components is to create modular and reusable features for applications. If you don't understand that, here is an analogy. Take, for instance, a school library that has over 10,000 books without any proper organization. Getting a book from an author of your choice will be tiring and tedious.
This is where segmentation comes in. A segment catalog in a library is a way of organizing the library's collections into smaller, more manageable groups. Essentially, it involves breaking down the library's holdings into smaller segments or categories based on a specific set of criteria. This can help users more easily find the books they are looking for by narrowing down the search to a specific segment. Now take your segment as a component; this is used for breaking large applications into modular or smaller segments. This will help you manage your application effectively. Now that you have learned the meaning of component, let's look at creating an example for it.
To create a component with Vue CLI, you can follow these steps:
- Navigate to the
src/componentsfolder in your project directory. - Create a new .vue file for your component, for example, MyComponent.vue.
- Inside the MyComponent.vue file, define the template, script, and style for your component using the Vue single-file component syntax.
For example, a simple MyComponent.vue file could look like this:
<template>
<div>
<h1>{{ name }}</h1>
<p>{{ email }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
name: 'Makanju Emmanuel',
email: 'makurseme@gmail.com'
}
}
}
</script>
<style scoped>
/* styles g*/
</style>
- Save the file and import your new component in
src/view/HomeView.vueor in any component of your choice.
That's it! You now know how to create a new Vue component.
The role of components in Vue.js is to make it easy to create reusable and modular code. By breaking down a complex UI into smaller components, developers can better organize their code and make it more maintainable. Components can be used across different parts of an application, making it easy to reuse code and save time.
Passing data through props and event emitters
When working with components, the most common thing is communication between them, i.e., maybe parent-to-child communication or child-to-parent communication.
Props are a way to pass data from a parent component to a child component. The parent component can bind data to the child component's props, which the child component can then use to render its template.
To pass data through props, you can follow these steps:
- To do this, we will extend our HomeView.vue page. Let's make it our parent component, define the data that you want to pass to the child component in this view file as a property.
- Bind the data to the child component's "MyComponentVue" props using the v- bind directive, or the shorthand:
For example:
<template>
<div class="home">
<MyComponentVue :my-prop="parentData"/>
</div>
</template>
<script>
// @ is an alias to /src
import MyComponentVue from '@/components/MyComponent.vue'
export default {
name: 'HomeView',
data(){
return {
parentData: 'You are learning about props in this article'
}
},
components: {
MyComponentVue
}
}
</script>
- In the child component, define the props that you want to receive data from the parent component.
For example:
src/components/MyComponent
<template>
<div>
<h1>{{ name }}</h1>
<p>{{ email }}</p>
<p>{{ myProp }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
myProp: String
},
data() {
return {
name: 'Makanju Emmanuel',
email: 'makurseme@gmail.com'
}
}
}
</script>
<style scoped>
/* styles g*/
</style>
Event emitters are a way for child components to communicate with parent components. The child component can send an event with data, which the parent component can listen for and respond to.
To pass data through event emitters, you can follow these steps:
- In the child component, define the event that you want to emit and the data that you want to pass with it.
For example:
src/components/MyComponent.vue
<template>
<div>
<h1>{{ name }}</h1>
<p>{{ email }}</p>
<p>{{ myProp }}</p>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
myProp: String
},
data() {
return {
name: 'Makanju Emmanuel',
email: 'makurseme@gmail.com'
}
},
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child!')
}
}
}
</script>
<style scoped>
/* styles g*/
</style>
- In the parent component, listen for the child component's event using the v-on directive or the shorthand @.
For example: src/views/HomeView.vue
<template>
<div class="home">
<MyComponentVue @message-sent="handleMessage" :my-prop="parentData"/>
<!-- render emit data -->
<p>{{ newMsg }}</p>
</div>
</template>
<script>
// @ is an alias to /src
import MyComponentVue from '@/components/MyComponent.vue'
export default {
name: 'HomeView',
components: {
MyComponentVue
},
data(){
return {
parentData: 'You are learning about props in this article',
newMsg: '',
}
},
methods: {
handleMessage(message) {
this.newMsg = message
}
}
}
</script>
- In the parent component's method, define how you want to handle the data that was passed through the event.
That's it! You now know how to pass data between components in Vue.js using props and event emitters. These techniques are powerful tools for building reusable and maintainable components in your Vue.js applications.
Directives
Vue directives are special attributes that come pre-built with Vue. You can use them in your Vue templates to apply dynamic behavior to the HTML elements. Directives are prefixed with the v-prefix and provide additional functionality to the elements they are applied to.
Here are some commonly used Vue directives
v-model v-for v-if v-show v-bind and a lot more.
However, you can also create custom directives that serve your needs and reuse them in multiple places across the platform. For you to understand the fundamentals of how to work with forms, list rendering, and conditional rendering, kindly visit the vue js documentation. I won't dwell too much on them since they are available in the documentation, but a link is provided for you to learn all the useful elements we are going to be using moving forward.
You can also explore the documentation to learn more fundamental concept.