Explain Vue advanced construction properties in detail

Time:2021-9-21
catalogue
  • 1. Directive custom directive
  • 2. Mix in
  • 3. Extensions inheritance
  • 4. Provide and inject

1. Directive custom directive

In the code under the Vue framework, native DOM operations are rarely used because they are encapsulated into instructions in Vue. For example, the < div V text = “XXX” > < / div > instruction we saw earlier. In fact, its internal operations are:

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

Vue encapsulates the native DOM operation into an instruction. If the element wants to use the instruction, it can be directly used as an attribute in the element tag in the HTML template. It is easy to introduce and reduce repetition.

However, Vue cannot take all DOM operations into account in advance and package them into corresponding instructions. Some DOM operations need to be used by developers in practice. Therefore, Vue provides user-defined instructions, which can be roughly divided into the following two types:

Similar to user-defined components, user-defined instructions are also divided into global and local. Next, customize a print characteryInstructionsv-yAs an example:

Global instruction

Global properties are registered in specific functions provided by Vue:


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

Local instruction

It can only be used in the template that defines the instruction

It can be in the template attribute of the full version

main.js

new Vue({
  template:`
    <div v-y>
      < 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. Vue file

app.vue

<template>
    <div>
      < button V-Y > 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 (the parameter is the same as above) {}, // executed when the element is inserted into the page
    Update: function (the parameter is the same as above) {}, 
    Componentupdated: function (the parameter is the same as above) {}, 
    Unbind: function (the parameter is the same as above) {} // execute when the element disappears
}

In the parameters of the function attribute, El refers to the element calling the instruction. Info contains all the information. If necessary, find it in info

2. Mix in

The main purpose of mixing in is to reduce the repetition of construction options. You can extract the part of the repeated construction options and put it into a separate *. JS file, import it with import, and then mix in the construction options through the mixins attribute.

Minxin is an intelligent blend. It will be intelligently blended according to the added blend and the current options, rather than simply copying.

3. Extensions inheritance

Inheritance has the same function as Minxin, but extend is more abstract. Both of them simplify the repetition of construction options. Extend can add its own defined attributes to the empty shell of the original Vue as fixed attributes, and then use the self-defined class myvue that inherits Vue when creating Vue objects.

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(){
            //...
        }
    }
}

Data modification by offspring injection


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

It works a bit like the. Sync modifier, but more widely than. Sync.

The above is the details of Vue advanced construction properties. For more information about Vue advanced construction properties, please pay attention to other relevant articles of developeppaer!

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]