What is the important concepts of Vue JS?

Vue Js Important Concepts!

1. Vue Instance:

The Vue instance is the root of every Vue application. It's created with the new Vue() constructor and takes an options object that can contain various properties. The el property specifies the HTML element to which the Vue instance is attached, and the data property holds the data for the instance.

<div id="app">
  {{ message }}
</div>


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
      

2. Data Binding:

Data binding in Vue.js allows you to automatically update the view whenever the data changes and vice versa. The v-model directive is used for two-way data binding on form elements.

<div id="app">
  <input v-model="message">
  {{ message }}
</div>


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
      

3. Directives:

Vue directives are special tokens in the markup that tell the library to do something to a DOM element. For example, v-if is a directive that conditionally renders an element based on the truthiness of an expression.

<div id="app">
  <p v-if="seen">Now you see me</p>
</div>


var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
});
      

4. Components:

Components are reusable Vue instances with a name and template. They promote modularization and reusability in your application.

<div id="app">
  <my-component></my-component>
</div>


Vue.component('my-component', {
  template: '<p>A custom component!</p>'
});

var app = new Vue({
  el: '#app'
});
      

5. Computed Properties:

Computed properties are functions in Vue that are cached based on their dependencies. They are useful for performing calculations based on data and updating the view.

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
});
      

6. Lifecycle Hooks:

Vue components go through a series of lifecycle stages. Lifecycle hooks are methods that allow you to execute code at specific stages, such as before the component is created (beforeCreate), after it is mounted (mounted), or before it is destroyed (beforeDestroy).

// JavaScript
Vue.component('lifecycle-example', {
  beforeCreate() {
    console.log('Before create hook');
  },
  created() {
    console.log('Created hook');
  },
  mounted() {
    console.log('Mounted hook');
  },
  beforeDestroy() {
    console.log('Before destroy hook');
  },
  destroyed() {
    console.log('Destroyed hook');
  },
  template: '<p>{{ message }}</p>'
});
      

7. Props:

Props allow you to pass data from a parent component to a child component. They are specified as an array in the child component and can be bound to the parent's data.

Vue.component('child-component', {
  props: ['message'],
  template: '<p>{{ message }}</p>'
});

var app = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello, Vue from Parent!'
  }
});
      

8. Custom Events:

Custom events allow child components to communicate with parent components. The child component can trigger an event using $emit, and the parent component listens for that event using @custom-event.

Vue.component('child-component', {
  template: '<button @click="emitEvent">Click me</button>',
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hello from Child!');
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    messageFromChild: ''
  },
  methods: {
    handleCustomEvent(message) {
      this.messageFromChild = message;
    }
  }
});
      

9. Router:

Vue Router is a plugin for Vue.js that enables client-side routing. It allows you to define routes and associate them with components to create a single-page application.

const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

var app = new Vue({
  el: '#app',
  router
});