resources

  • directivesinstruction
    • Used for custom instructions
    1. Define a global directive:x.VueIt’s automatically added to the frontv-, it can be used anywhere, and what it does is click to print a string
        import Vue from 'vue'
    Vue.directive('x', {
        inserted(el) {
            el.addEventListener('click'.function(){
                console.log('Global V-x instruction')})}})Copy the code
    • insertedRepresents when an element is inserted into the DOM. Among other things:
      • bindOnly called once, the first time a directive is bound to an element
      • updateCalled when the VNode of the component is updated
      • componentUpdatedCalled when the vNodes (including child VNodes) of the component are updated
      • unbindOnly called once, when an instruction is unbound from an element

    A total of five functions can be customized in a custom instruction

    • elRepresents the bound element that is passed in automatically by Vue
    1. Define a local directive:x. It can be used inside the component you declare
        import Vue from 'vue'
    new Vue({
        ...
        directives: {
            'x': {inserted(el) {
                    el.addEventListener('click'.() = > console.log('Local instruction X')}}}... }).$mount('#app')
Copy the code
  • The primary role of directives above is to operate native DOM to reduce duplication.

combination

  • Mixins with

    • mixinsReduce the duplication of data, methods, and hooks
    • When multiple components require the same operation, extract the same part and put it in a JS file (such as mixins/commen.js).
        // commen.js
    
    const commen = { 
        // The extracted code
    }
    
    export default commen
Copy the code
    • Mixins property imports are used when other components need to use this code
        <script>
        import commen from '.. /mixins/commen.js'
        export default{...mixins: [commen],
        }
    <script>
Copy the code
    • Mixed rules
      • Properties and functions in a component override the same properties and functions mixed into the content
      • Specific rules: documentation

  • Extends inheritance

    • Extends is a slightly more abstract encapsulation than mixins
    • Declare a new class that extends from Vue as an extension
        // myVue.js
    import Vue from 'vue'
    // import commen from '.. /mixins/commen'
    const myVue = Vue.extend({
        // commen code
        // or
        // mixins: [commen]
    })
    export default myVue
Copy the code
    • Component introduction
        <script>
        import myVue from '.. /myVue.js'
        export default {
            extends: myVue,
            ...
        }
    <script>
Copy the code
    • MyVue can also be used as a constructor instead of Vue to generate instances of Vue

  • Provide and inject new capital.

    • It is used for sharing data and method in a large range. Ancestors provide data and descendants inject data. Information is shared over N generations
    • Provide provides data, inject obtains data
    export default {
        provide(){
            return {
                x: this.x,
                y: this.y
            }
        }
    }
    
Copy the code
    export default {
        inject: ["x"."y"]}Copy the code