Basics of Vue JS

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>

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.