Detailed explanation of Vue advanced construction properties

1. Directive custom directive

In the code under the Vue framework, native DOM operations are rarely used. That is because native DOM operations are encapsulated into instructions in Vue. For example, the <div v-text="xxx"></div> instruction we saw earlier actually has the following internal operation:

div.innerText = xxx; //Of course, the div here is the obtained DOM element

Vue encapsulates native DOM operations into instructions. If an element wants to use the instruction, it can directly use it as an attribute in the element tag in the HTML template. It is simple and convenient and reduces duplication.

However, Vue cannot take all DOM operations into consideration and encapsulate them into corresponding instructions. Some DOM operations are not known until developers use them in practice. Therefore, Vue provides a way for users to customize instructions, which can be roughly divided into the following two types:

Custom instructions are similar to custom components and are also divided into global and local. The following takes the custom instruction vy for printing the character y as an example:

Global Directives

Global properties are registered in specific functions provided by Vue:

Vue.directive("y", {
  inserted: function(el) {
    el.addEventListener("click", () => console.log("y"));
  }
});

Local instructions

Can only be used in the template that defines the directive

It can be in the template attribute of the complete version

main.js

new Vue({
  template:`
    <div vy>
      <button>Click</button>
    </div>
  `,
  directives:{
    'y':{
      inserted: function(el) {
        el.addEventListener("click", () => console.log("y"));
      }
    }
  }
}).$mount("#app");

Or in the export default{} of the incomplete version of the .vue file

app.vue

<template>
    <div>
      <button vy>Click</button>
    </div>
</template>
<script>
    export default {
      directives:{
        'y':{
          inserted: function(el) {
            el.addEventListener("click", () => console.log("y"));
          }
        }
      }
    };
</script>

directiveOptions

There are 5 function attributes in the instruction object

{
    bind: function (el,info,vnode,oldVnode) {}, //Executed when the element is created in memory inserted: function (parameters as above) {}, //Executed when the element is inserted into the page update: function (parameters as above) {}, 
    componentUpdated: function (parameters as above) {}, 
    unbind: function (parameters as above) {} //Execute when the element disappears}

In the function attribute parameter, el refers to the element that calls the instruction, and info contains all the information. When needed, just look for it in info.

2. Mixin

The main purpose of mixins is to reduce the duplication of construction options. You can extract the repeated construction options into a separate *.js file, import it, and then mix it into the construction options through the mixins attribute.

minxin is a smart mixin that will be mixed intelligently based on the added mixins and the current options, rather than simply copying.

3. Extends inheritance

Inheritance and mixin have similar functions, but extend is more abstract. Both simplify the repetition of construction options. Extend can add its own defined properties as fixed properties based on the original Vue shell, and then use it to create a custom class MyVue that inherits Vue when creating a Vue object.

MyVue.js

const MyVue = Vue.extend({
    minxins: [log]
});

export default MyVue;

4. provide and inject

The parent provides common data or methods

{
    //...
    provide(){
        return {
            xx: this.changexx,
            yy: this.changeyy
        }
    },
    methods:{
        changexx(){
            //...
        },
        changeyy(){
            //...
        }
    }
}

Descendants inject things to modify data

{
    inject: ["changexx", "changeyy"]
}

This works a bit like the .sync modifier, but is more general.

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