What are some examples of using the Options API in Vue 2?

What are some examples of using the Options API in Vue 2?

The Options API in Vue 2 allows you to define your component's data, methods, and lifecycle hooks. For example, you can create a simple counter component like this:

Vue.component('counter', {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  template: `<div><button @click="increment">Count: {{ count }}</button></div>`
});

Can you explain the lifecycle hooks in the Options API?

Sure! In the Options API, lifecycle hooks are special methods that allow you to run code at specific stages of a component's lifecycle. For example:

• created(): Called after the instance is created.
• mounted(): Called after the component is mounted to the DOM.
• updated(): Called after the data changes and the DOM is re-rendered.

What is the difference between data and computed properties?

Data properties are reactive and hold the state of your component, while computed properties are derived from data properties and are cached based on their dependencies. Computed properties only re-evaluate when their dependencies change.

Can you give me an example of using computed properties?

Absolutely! Here's an example:

Vue.component('example', {
  data() {
    return { firstName: 'John', lastName: 'Doe' };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  template: `<div>Full Name: {{ fullName }}</div>`
});