VueJs - Tutorials Featuring Practical Examples for All Skill Levels
Understanding VueJs
VueJs is designed to be user-friendly and adaptable. Its primary focus is on the view layer of applications, enabling developers to integrate VueJs effortlessly with other libraries or existing projects.
Built on the Model-View-ViewModel (MVVM) architecture, VueJs helps in creating complex applications with less code. This reduction in code complexity benefits both beginners and experts, allowing for a smoother learning experience and efficient development.
Advantages of VueJs :
The framework balances simplicity and powerful features, making it suitable for everything from small personal projects to large enterprise applications.
Its extensive documentation and strong community support make it easier to find help when necessary.
Whether you want to create a tailored small project or work in a team on a large-scale application, VueJs provides the necessary flexibility and resources.
Getting Started with VueJs
Setting Up Your Environment
Before jumping into coding, you’ll first need to set up your development environment. Follow this step-by-step guide to get started:
Install Node.js: Go to the Node.js official website and download the latest version suitable for your operating system.
Install Vue CLI: Open your command line and run this command:
npm install -g @vue/cli
Create a New Project: Generate a new Vue project with this command:
vue create my-vue-app
Navigate to Your Project:
cd my-vue-app
Run Your Project:
npm run serve
After completing these steps, your VueJs application should be accessible at `http://localhost:8080`.
Building Your First Vue Component
Creating a component is crucial in VueJs. Components are the building blocks that encapsulate both UI and functionality.
Example: A Simple Counter Component
To get started, create a new file named `Counter.vue` within the `src/components` folder and add the following code:
<template>
<div>
<h1>{{ count }}</h1>
<button @click="incrementCount">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
incrementCount() {
this.count += 1;
}
}
}
</script>
This component features a heading displaying the current count, along with a button that increments this count whenever clicked. You can easily integrate this component into the `App.vue` file by importing it and including it in the template.
Vue Directives: Making Interactivity Easy
VueJs directives simplify adding functionality to your application. These special tokens in the markup instruct VueJs to manipulate the DOM elements effectively.
Example: Using `v-if` and `v-for`
Let’s create a simple application that displays a list of products. We will conditionally render items and loop through available products.
Modify the `App.vue` file:
<template>
<div id="app">
<h1>Product List</h1>
<ul>
<li v-for="product in products" :key="product.id" v-if="product.available">
{{ product.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{ id: 1, name: "Product A", available: true },
{ id: 2, name: "Product B", available: false },
{ id: 3, name: "Product C", available: true }
]
}
}
}
</script>
Here, `v-for` loops through the list of products, while `v-if` ensures that only available products get displayed.
State Management with Vuex
When your application scales up, managing state can become tricky. Vuex is the official state management library for VueJs that facilitates predictable state management.
Example: Basic Vuex Store
Install Vuex:
npm install vuex --save
Create a Vuex Store: Add a new file named `store.js` to the `src` directory.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit }) {
commit('increment');
}
}
});
Integrate Vuex with Vue: In your `main.js`, import the store and add it to the Vue instance.
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
render: h => h(App),
store
}).$mount('#app');
Using the Store in Components: Access the Vuex store in your components like this:
<template>
<div>
<h1>{{ count }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
increment() {
this.$store.dispatch('increment');
}
}
}
</script>