This is the 26th day of my participation in the August Text Challenge.More challenges in August

1. What is a custom directive

To understand this, we need to know what an instruction is. In VUE, things like V-bind, the binding parsing expression v-ON, the binding event function,

Directives are special attributes prefixed with a V -. The value of the attribute directive is expected to be a single JavaScript expression (v-for is an exception). The directive’s job is to react to the DOM with the collateral effects of changing the value of an expression.

An instruction also contains parameters, which can be static or dynamic

    // Static parameters
    <a v-bind:herf="url">....</a>
    // Dynamic parameters
    <a v-bind:[x] ="url">.</a>
Copy the code

2. Customize commands

The custom instruction in Vue is divided into: global custom instruction and local custom instruction so how to declare custom instruction?

  • Global custom directive:
Vue.directive('demon',option)
Copy the code
  • Local custom instructions
    const vm = new Vue({
        el:"#app".data(){
            return {
                msg:"badspider"}},// The first way
        directives: {big(element,binding){
                // Element is the tag to which you bind
                // Binding is the attribute of the tag that you bind
            element.innerHTML = binding.value
    }
    // The second way
        big: {// called when the directive is successfully bound to the element
	bind(element,binding){},
        // when the element of the directive is inserted into the page
        inserted(element,binding){},
        // When the template in which the directive resides is reparsed
        update(element,binding){}
        // call after the component's VNode** and its child vNodes ** are updated.
        componentUpdated(element,binding){}
        // Only called once, when the instruction is unbound from the element.
        unbind(element,binding){}}}})Copy the code

Use:

Like the first way, when do those instructions get called?

1. Directives are called when they are successfully bound to elements. 2. Directives are also called when the page on which your directives are located is re-rendered

The first is just a short version of the second, but without the inserted hook function, which causes some methods to fire improperly or not, like Focus ()