Vue.js is a progressive JavaScript framework used for building user interfaces, often employed for creating single-page applications and UI components. Here are some basics to get you started with Vue.js: Basics of Vue JS
1. Vue Instance:
At the core of Vue.js is the Vue instance, which is created using:
var app = new Vue({
// options
});
Here, app
is the Vue instance, and options are where you define data, methods, computed properties, lifecycle hooks, and more.
2. Data Binding:
Vue.js provides declarative rendering with data binding. You can bind data to HTML attributes or use the mustache syntax ({{ }}
) for text interpolation:
<div id=”app”> {{ message }} </div>
<script> var app = new Vue({ el: ‘#app’, data: { message: ‘Hello, Vue!’ } }); </script>
3. Directives:
Directives are special attributes with v-
prefix provided by Vue.js. They apply reactive behavior to the DOM:
v-bind:
for binding attributes dynamically.
v-model
for two-way data binding on form inputs.
v-if
,v-else
,v-show
for conditional rendering.
v-for
for rendering lists.
4. Methods and Computed Properties:
Inside the Vue instance, you can define methods and computed properties:
var app = new Vue({
data: {
count: 0
},
methods: {
increment: function() {
this.count++;
}
},
computed: {
doubled: function() {
return this.count * 2;
}
}
});
5. Components:
Vue.js allows you to build modular and reusable components:
Vue.component(‘todo-item’, {
props: [‘todo’],
template: ‘{{ todo.text }}’
});
var app = new Vue({
data: {
todos: [
{ id: 1, text: ‘Learn Vue’ },
{ id: 2, text: ‘Build something awesome’ }
]
}
});
<ul> <todo-item v-for=”todo in todos” :key=”todo.id” :todo=”todo”></todo-item></ul>
![](https://rengatechnologies.com/blog/wp-content/uploads/2024/06/rengatechnologies.com-1-1-1024x536.png)
6. Lifecycle Hooks:
Vue.js provides lifecycle hooks to run code at specific stages of a component’s lifecycle:
beforeCreate
,created
beforeMount
,mounted
beforeUpdate
,updated
beforeDestroy
,destroyed
7. Vue Router:
For single-page applications, Vue Router is used to navigate between different views:
// Define routes
const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About }
];
// Create router instance
const router = new VueRouter({
routes
});
// Mount Vue app with router
const app = new Vue({
router
}).$mount(‘#app’);
8. Vue CLI:
Vue CLI (Command Line Interface) is a full system for rapid Vue.js development. It provides a modern build setup with a single command:
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
9. Vuex:
Vuex is a state management pattern and library for Vue.js applications. It helps manage global state in a centralized store:
import Vue from ‘vue’;
import Vuex from ‘vuex’;
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});
10. Vue Devtools:
Vue Devtools is a browser extension available for Chrome and Firefox. It allows you to inspect Vue component hierarchies and states.
These basics should give you a solid foundation to start building Vue.js applications. As you delve deeper, you’ll discover more features and patterns that Vue.js offers for efficient and scalable frontend development.