This paper introduces the Vue custom instruction base, using the registration of a V-color instruction, to the font assigned color as an example. Give it a thumbs up if you like it.

First, global registration

Vue.directive('color', {
    inserted: function(el,binding) { el.style.color=binding.value; }})Copy the code

use

<template>
    <div>
        <h1 v-color="color"> Custom instruction </h1> </div> </template> <script>export default {
    data() {
        return {
            color:'red'
        }
    },
}
</script>
Copy the code

Apply colours to a drawing

Two, local registration

<template>
    <div>
        <h1 v-color="color"> Custom instruction </h1> </div> </template> <script>export default {
    data() {
        return {
            color:'red'
        }
    },
    directives:{
        color:{
            inserted:function(el,binding){
                el.style.color=binding.value;
            }
        }
    }
}
</script>
Copy the code

Custom instruction hook function

[Insert] From the above example, you can see the inserted option, which is the hook function of the custom directive, and the custom directive has five hook functions:

  1. bind: only called once, when the directive is first bound to an element, which can be initialized in this hook function;
  2. inserted: called when the bound element is inserted into the parent nodebindCall after;
  3. update: is called when the VNode of the bound component is updated, but may occur before its child VNodes are updated. The value of the instruction does not necessarily change when it is called, so unnecessary template updates can be ignored by comparing the values before and after the update.
  4. componentUpdated: call after the VNode of the component where the instruction resides and its sub-VNodes are all updated;
  5. unbind: called only once, when directives are unbound from elements.
Vue.directive('color', {
    bind:function(){
        alert('bind')
    },
    inserted: function (el,binding) {
        alert('inserted')
        el.style.color=binding.value;
    },
    update:function(el,binding){
        alert('update')
        el.style.color=binding.value;
    },
    componentUpdated:function(el,binding){
        alert('componentUpdated')
        el.style.color=binding.value;
    },
    unbind:function(){
       alert('V-color command unbind')}})Copy the code
<template>
    <div>
        <h1 v-color="color" v-if="show">{{title}}</h1>
        <button @click="show=false"</button> < button@click ="Title = 'change the title"< button@click = < button@click ="color='blue'"</div> </template> <script>export default {
    data() {
        return {
            color: 'red',
            title: 'Custom instruction',
            show: true
        }
    },
}
</script>
Copy the code

Hook function parameters

As you can see from the above example, the value of the inserted option is Funcion, where el Binding is the argument to the hook function, and has four arguments:

  1. El: the element bound by the directive that can be used to manipulate the DOM directly;

  2. Binding: An object containing the following attributes;

    • name: Command name, excluding the v- prefix;
    • value: binding value of the instruction, for example:v-my-directive="1 + 1", the binding value is 2;
    • expression: expression for the binding of the directive. Ex. :v-my-directive="1 + 1"Where, the expression is “1 + 1”;
    • arg: Parameters passed to the instruction, for examplev-my-directive:foo, the parameter is “foo”;
    • modifiers: an object that contains modifiers. Ex. :v-my-directive.foo.barIn, the modifier object is {foo: true, bar: true},
    • oldValue: The value preceding the instruction binding, only inupdateandcomponentUpdatedHooks are available. Available regardless of whether the value changes.

  3. Vnode: a virtual node generated by Vue compilation.

  4. OldVnode: Last virtual node, available only in update and componentUpdated hooks.

In addition toelOther parameters are read-only and cannot be modified. If you need to share data between hooks, go through the element’sdatasetTo carry out.

Register a command to make the font color flashv-color

This example uses the dataset of the element to control setInterval in different hook functions.

Dynamic command parameters are used to control the flashing frequency of font color.

Vue.directive('color', {
    inserted: function (el, binding) {
        const interval = binding.arg ? binding.arg : 1000;
        if (Array.isArray(binding.value)) {
            let i = 0;
            el.style.color = binding.value[i];
            el.dataset.time = setInterval(() => {
                if (i > binding.value.length - 1) {
                    i = 0;
                }
                el.style.color = binding.value[i];
                i++;
            }, interval);
        } else {
            el.style.color = binding.value;
        }
    },
    componentUpdated: function (el, binding) {
        clearInterval(el.dataset.time);
        const interval = binding.arg ? binding.arg : 1000;
        if (Array.isArray(binding.value)) {
            let i = 0;
            el.style.color = binding.value[i];
            el.dataset.time = setInterval(() => {
                if (i > binding.value.length - 1) {
                    i = 0;
                }
                el.style.color = binding.value[i];
                i++;
            }, interval);
        } else {
            el.style.color = binding.value;
        }
    },
    unbind: function (el, binding) {
        clearInterval(el.dataset.time)
    }
})
Copy the code
<template>
    <div>
        <h1 v-color:[interval]="color"> </h1> < button@click ="interval+=100"</button> < button@click ="interval-=100"</button> </div> </template> <script>export default {
    data() {
        return {
            color: ['red'.'blue'.'green'.'yellow'.'Pink'.'purple'],
            interval:1000,
        }
    },
}
</script>
Copy the code