Detailed explanation of Vue options

1. What are options?

Whether it is jQuery.js or Vue.js, they are libraries that are re-encapsulated based on js, and they all need to create corresponding instances to encapsulate corresponding operations. For example, you can get a jQuery div element instance through $('div'), also called a jQuery object. The jQuery object contains various operation APIs for the selected div element, so the jQuery instance encapsulates various operations on the selected element.

Vue.js goes a step further and encapsulates all operations on the view, including reading and writing data, monitoring data changes, updating DOM elements, etc. A Vue instance, also called a Vue object, is created through new Vue(options). The Vue instance encapsulates all operations for operating element views, and the view of the corresponding area can be easily operated through the Vue instance.

2. What attributes are included

There are many specific optional properties of the options object, which can be divided into five categories, which can be viewed on the vue.js official website, as follows:

3. Entry Attributes

el

The el attribute is also called the mounting point, which can be considered as an abbreviation of element. To create a Vue instance, you need to know on which element to create the Vue instance and which view to operate on.

There are two ways to define a mount point.

1. Set the el property

new Vue({
  el: "#app",
  render: h => h(App)
})

2. Use $mount interface

new Vue({
  render: h => h(App)
}).$mount("#app");

data

The data attribute is also called internal data. The attribute value can be an object or a function, but it is recommended to use a function. The function in an object is also called a method. And if it is data in a component, a function must be used.

The reason why the function is recommended is that when using the same options object as a parameter to create multiple Vue instances, if the data attribute value is an object, when using new Vue(options) to create a Vue instance, the options.data attribute value will be directly assigned to the Vue instance.data attribute. Since the object assignment is a copied address, the data attribute values ​​of multiple instances all point to the address of the same object. Multiple instances will share a data object. When one instance changes the data object, the data object of another instance will also be changed.

When the data attribute value is a function, Vue will execute the data() function when creating an instance, and assign the object returned by the function execution to the Vue instance .data attribute. Each time the function is executed, the object returned is a different object. Therefore, the data attribute values ​​of multiple instances correspond to different objects. A change to one will not affect another, and they are independent of each other.

1. Objects of use

data:{
    n: 0
}

2. Use functions

data(){
    return {
      n: 0
    }
}

methods

The methods attribute is also called a method. The attribute value is an object. The attributes in the object are all functions. These functions can be callback functions for event processing or ordinary functions. The characteristic is that each time the page is rendered, methods are executed, as follows:

methods:{
    add(){
      this.n +=1
    }
}

components

Components means components, which are also Vue instances designed based on the concept of modularity for easy reuse. There are three ways to use them, as follows:

1. Global Registration

Define a component globally so that it can be used at any time throughout the project. The definition method is as follows

Vue.component('my-component-name', {  

    // ... options... This part is the same as the options for creating a vue instance, after all, a component is a vue instance})
new Vue({ el: '#app' })

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

2. Local Registration

//Define the component through a normal JavaScript object var ComponentA = { options }

//Then define the component you want to use in the components option new Vue({ 
    el: '#app',
    components:
        component-a: ComponentA //or define the object directly in it component-b: {
            //Same content as options, but data must be a function}
    } 
})

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

3. Module System

By separating the component into a *.vue file, and then importing and referencing it through import, as follows
main.js

import ComponentA from './ComponentA.vue'
new Vue({ 
    el: '#app',
    components:{
        ComponentA: ComponentA
        //In ES6 syntax, when the attribute and attribute value are the same, you can only write one //ComponentA
    }
})

<div id="app">
    <ComponentA></ComponentA>
</div>

Summarize

It is recommended to use the last module system component, which is more modular and has a clearer structure.
For a complete introduction, please see vuejs official website-components

props

Props, also known as external data, is generally used in components to accept external data. When the component is used, it is passed through the global attributes of the tag. The following is an example of introducing the full version of vue.js

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Data Transfer

main.js

import HelloWorld from ./HelloWorld.vue
new Vue({
    template:`
        <HelloWorld msg="hello my world"/> //This can only pass strings <HelloWorld :msg="ms"/> //This is to pass variables, i.e. this.ms
        //Also available: pass function name <HelloWorld :msg="fn"/>
    `,
    data:{
        ms: 'hello my world'
    },
    methods:{
        fn(){
            ...
        }
    }
})

Lifecycle Hooks

In Vue, each state transition point is called a hook, such as after the instance is created, and before the instance is created. The instance creation is a hook, corresponding to the two stages before and after, that is, beforeCreate before the instance is created, and created after the instance is created. The following appear in pairs, so you only need to remember one.

This property is a function that is called at the corresponding period.

• created instance appears in memory
• mounted (data request can be made at this hook) The instance appears on the page
• updated The instance is updated
• destroyed The instance is destroyed from the page and memory

The above is a detailed explanation of Vue's options. For more information about Vue's options, please pay attention to other related articles on 123WORDPRESS.COM!