Detailed explanation of Vue custom instructions and their use

1. What is a directive?

When learning Vue, you will definitely come into contact with instructions, so what are instructions?

Vue provides some more convenient outputs for pages and data. These operations are called instructions, represented by v-xxx, such as the attribute <div v-xxx ></div> in the HTML page.

For example, in Angular, commands starting with ng-xxx are called directives.

The instruction encapsulates some DOM behaviors, combined with attributes as a code, the code has a corresponding value, and according to different values, the relevant DOM operations will be bound, that is, some template operations can be performed.

Some commonly used built-in v-directives in vue

• v-text: innerText property of an element, can only be used in double tags, has the same effect as {{ }}, and is rarely used
• v-html: the innerHTML of an element, which actually assigns a value to the innerHTML of an element
• v-show: Display and hide elements, switching based on CSS styles. If you decide to hide it, you will add display: none to the element's style.
• v-if: The insertion and removal operations of elements are equivalent to the destruction and creation of elements. If the value of the expression is false, a <!----> will be left as a marker. If the value of v-if is true in the future, the element will be inserted here (if if there is an else, do not leave a separate pit).
• v-else-if: The previous adjacent element must have v-if or v-else-if
• v-else: The previous adjacent element must have v-if or v-else-if. If both v-if and v-else-if have corresponding expressions, v-else can be written directly.
• v-for: Used to loop and render a set of data (array or object). You must use a specific syntax: v-for="alias in expression". Note: When v-for and v-if are in the same node, v-for has a higher priority than v-if. That is, v-if will run in each v-for loop
• v-on: Mainly used to monitor dom events and then perform some operations. Abbreviated as [@]
• v-model: used to create two-way data binding on form controls such as input/textarea.
• v-bind: Dynamically bind one or more attributes, commonly used to bind class, style, href, etc.
• v-once: Components and elements are rendered only once, and will not be re-rendered when data changes.

Comparison between v-if and v-show

• v-if is truly conditional rendering because it ensures that event listeners and child components within the conditional block are properly destroyed and recreated during the toggle.
• v-if is also lazy, if the condition is false on initial rendering, it does nothing until the condition is true for the first time, then the conditional block is rendered.
• In contrast, v-show is much simpler. No matter what the initial conditions are, the element will always be rendered, and it is simply toggled based on CSS.

Generally speaking, v-if has higher switching cost, while v-show has higher initial rendering cost. Therefore, if very frequent switching is required, it is better to use v-show, and if the condition rarely changes during runtime, it is better to use v-if.

In the actual development process, these built-in instructions may not meet all needs, or you may want to add some special functions to the elements. At this time, we need to use the powerful and flexible function "custom instructions" provided by Vue.

There is such a sentence in the official API documentation: Custom instructions are used to perform low-level operations on ordinary DOM elements. That is to say, the problem that custom instructions solve or the usage scenario is to perform low-level operations on ordinary DOM elements, so we cannot use custom instructions blindly.

2. Hook function of custom instructions

Vue provides 5 hook functions for custom instructions:

• bind: Called when the directive is first bound to an element and is executed only once. Here you can perform a one-time initialization setup.
• inserted: The bound element is called when it is inserted into the DOM of the parent node (only the parent node is guaranteed to exist).
• update: called when the component is updated.
• componentUpdated: called when components and subcomponents are updated.
• unbind: Called when the instruction is unbound from the element and is executed only once.

Notice:

1.Except update and componentUpdated hook functions, each hook function contains three parameters: el, binding, and vnode

2. In each function, the first parameter is always el, which represents the DOM element to which the instruction is bound. This el parameter is a native JS object, so Vue custom instructions can be used to interact directly with the DOM.

3.binding is an object that contains the following attributes: name, value, oldValue, expression, arg, modifiers

4.oldVnode is only effective in update and componentUpdated hooks

5. Except for el, binding and vnode attributes are read-only

To put it simply, the hook function is the life cycle. That is, when a directive is bound to an element, there are 5 life cycle event functions inside the directive. Next, create a case to see the triggering of these hook functions:

<p v-test>This is a paragraph of text</p>
​
export default {
    ... ...
    directives: {
        test: {
              bind () {
                console.log('bind')
              },
              inserted () {
                console.log('inserted')
              },
              update () {
                console.log('update')
              },
              componentUpdated () {
                console.log('componentUpdated')
              },
              unbind () {
                console.log('unbind')
              }
        }
    }
}

result:

When the page is rendered, the bind and inserted functions are triggered. So when will the other three hook functions be triggered?

Official explanation about update:

update: Called when the VNode of the component is updated, but it may happen before its child VNodes are updated. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values ​​before and after the update (see below for detailed hook function parameters).

I'm a little confused. Does 'VNode of the component' refer to the DOM element that is currently bound to the directive? If so, will the update be triggered as long as the state of the current element changes? Use v-show to switch between showing and hiding elements:

<p v-test v-show="show">This is another paragraph of text</p>
<button @click="show = !show">toggle</button>

export default {
  data () {
    return {
      show: true
    }
  }
}

By default, bind and inserted are triggered. When the button is clicked to switch the display of the element, the result is as follows:

That is, when the style of an element is changed, the update and componentUpdated functions are triggered. Which event will be triggered if v-if is used?

<p v-test v-if="show">This is another paragraph of text</p>
<button @click="show = !show">toggle</button>

result:

It is found that unbind is triggered, because v-if deletes or rebuilds DOM elements. When the element bound to the instruction is destroyed, the unbind event of the instruction will be triggered. The new display will still trigger bind and inserted.

Summarize:

• bind(): Triggered when the directive is bound to an HTML element
• inserted(): Triggered when the element bound to the instruction is inserted into the parent node
• update(): Triggered when the state/style or content of the element bound to the directive (here refers to the Vue data bound to the element) changes
• componentUpdated(): Triggered when update() is executed
• unbind(): Triggered when the element bound to the directive is removed from the DOM

Here are some examples of application scenarios

1. The input box automatically gets the focus (official example).

2. Click outside the drop-down menu to hide the menu.

3. Verify the entered email address and phone number.

In the above cases, other methods can be used instead when doing projects, but Vue custom instructions can be defined in one place and called globally, making the code concise, efficient and easier to maintain.

The registration methods of directives are the same as the registration methods of "filters", "mixins" and "components", which are divided into two types: one is global registration and the other is local registration.

3. Global Instructions

// Add a random background to the element <div v-bgcolor></div>
   
Vue.directive('bgcolor', {
    bind: function(el, binding, vnode) {
        el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
    }
})

Note: When defining, the command name does not need to be prefixed with v-. When calling, you must prefix the command name with v-.

4. Local Instructions

// Same level as data and methods methods: {},
directives: {
    bgcolor:
         bind: function(el, binding) {
            el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
        }
    }
}

I personally prefer to use the global registration method, because now that custom instructions are used, they should be universal and reusable. Therefore, it is more valuable to provide instructions for the entire project, rather than just within a component. If it is only used in one place, you can just add the function directly. Why bother with all this effort?

5. Custom instructions with parameters

<div v-bgcolor='{color: 'orange'}'></div>

Vue.directive('bgcolor', {
    bind: function(el, binding) {
        el.style.backgroundColor = binding.value.color;
    }
})

6. Function abbreviation

If you want to trigger the same behavior when bind and update, and don't care about other hooks, you can write it like this:

// Global Vue.directive('bgcolor', function (el, binding) {
      el.style.backgroundColor = binding.value
})

// local directives: {
    bgcolor: (el, binding) => {
        el.style.backgroundColor = binding.value  
    }
}

7. Application Examples

After you are familiar with the creation method and parameters of the instruction, we will use it to create two practical cases.

The function of hiding the submenu by clicking on the blank space is realized through instructions. The specific code is as follows:

// clickOutside.js
export default {
    bind (el, binding) {
        const self = {} // Define a private variable to facilitate unbinding event listeners self.documentHandler = (e) => {
            if (el.contains(e.target)) { // Here we determine whether the bound element contains the click element, if so, return return false
            }
            if (binding.value) { // Determine whether the value is bound in the instruction binding.value(e) // If a function is bound, call that function. Here binding.value is the handleClose method}
            return true
        }
        document.addEventListener('click', self.documentHandler)
    },
    unbind (el) {
        //Remove event listening document.removeEventListener('click', self.documentHandler)
        delete self.documentHandler
    }
}

Use in component:

<template>
    <div>
        <div v-show="isShow" v-clickoutside="handleClickOutside" @click="showOrHide">
            Submenu... 
        </div>
    </div>
</template>
​
<script>
    import clickoutside from './js/clickOutside'
    
    export default {
        ... ...
        directives: {
            clickoutside
        },
        data() {
            return {
                isShow: true,
            };
        },
        methods: {
            handleOutsideClick() {
                this.isShow = false
            }
        }
    }
</script>

Custom instructions to optimize image loading: When the image is loading, a gray background is used to occupy the space before loading is completed, and the image is displayed directly after loading.

<template>
    <div>
        <!-- Parameters cannot be filled directly with URL addresses-->
        <img v-imgUrl='url' /> 
    </div>
</template>
​
<script>
    export default {
        data () {
            return {
                url: '../src/assets/logo.png'
            }
        }
    }
</script>

// Global registration Vue.directive('imgUrl', function (el, binding) {
    el.style.backgroundColor = '#FEFEFE' //Set background color var img = new Image()
    img.src = binding.value // Parameters after the binding.value instruction img.onload = function () {
        el.style.backgroundColor = ''
        el.src = binding.value
    }
})

The above is a detailed explanation of Vue custom instructions and their use. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!