How to customize directives in Vue?

 Vue officially provides some commonly used instructions v-text, v-html, v-model, v-if, v-show, etc. In addition, Vue also allows developers to customize related instructions. It is divided into private custom directives and global custom directives. The difference between them is: in each vue component, private custom directives can be declared under the directives node, and private custom directives only take effect in this component; globally shared custom directives Defining a directive needs to be declared via Vue.directive().

Here's a practical example:

 <div id="app">

        <input type="text" v-bind:value="n">

        <br>

        focus:<input type="text" v-my-focus:value="n">

        N:<p v-text="n"></p>

        N:<p v-add="n"></p>

        <input type="text" v-add:value="n">

        <input type="text" v-add:value="n">

        <button @click="n++">click</button>

        <p>{{a}}</p>

    </div>

    <script>

     Vue.config.productionTip=false;

     //

     Vue.directive("my-focus", function(element,binding){

        element.focus();

    })

        var vm = new Vue({

            el: '#app',

            data: {

                n:10,

                a:undefined

            },

            methods: {},

            directives:{

                add(element,binding){

                    console.log(this);

                    console.log(element,binding);

                    // element.innerText=binding.value+100;

                    element.value=binding.value;

                }

                /* add:{

                    bind(element,binding){

                        console.log(this);

                    console.log(element,binding);

                    element.innerText=binding.value+100;

                    },

                    inserted(element,binding){

                        console.log(this);

                    console.log(element,binding);

                    element.innerText=binding.value+100;

                    },

                    update(element,binding){

                        console.log(this);

                    console.log(element,binding);

                    element.innerText=binding.value+100;

                    }

                } */

            }

        });

    </script>

Summary: 

• bind: will only be called once, which means that it will be called when the instruction is bound to the element for the first time;

• update: When the page data is updated, this function will be triggered; 

• inserted: Called when the element where the instruction is located is inserted into the page.