This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

What is?

In addition to the core function default built-in instructions, Vue also allows the registration of custom instructions

Why?

In Vue, the main form of code reuse and abstraction is components. However, there are cases where you still need to perform low-level operations on normal DOM elements, and custom directives are used. \

How does it work?

As in this example on the official website, every time we enter a page, we need an input box to get focus, which can be done directly with the command

registered

First we have to register

Vue custom commands can be registered globally or locally.

global

This is global registration:

// Register a global custom directive 'V-focus'
Vue.directive('focus', 
    { 
        // When the bound element is inserted into the DOM...
        inserted: function (el) { 
            // Focus elements
            el.focus() 
        } 
    }
)
Copy the code
local

This is the local registration:

directives: { 
    focus: { 
        // The definition of a directive
        inserted: function (el) { 
        el.focus() } 
    }
}
Copy the code
use

You can use the new V-focus attribute on any element in the template

<input v-focus>
Copy the code

Image lazy loading

Most of the time, we need to process the picture, the more processing is lazy loading of the picture, a page if there are many pictures, we may need a lot of calculation, the visual area of the page, the size of the picture, the scrolling area, the position of the picture and so on

This is a little too complicated, and a lot of times when we use vUE, we use v-for loop, it’s more complicated to calculate these things, if we use custom instructions, it’s very easy to lazily load this image

Let’s use vue2. X to implement a simple.

I’m using the global binding directive.js

const lazy = {
    // Use IntersectionObserver to monitor EL
    observe(el) {
        const io = new IntersectionObserver((entries) = > {
            const realSrc = el.dataset.src;
            if (entries[0].isIntersecting) {
                if (realSrc) {
                    el.src = realSrc;
                    el.removeAttribute('data-src'); }}}); io.observe(el); }};const lazyLoad = {
    bind(el,binding) {
        el.setAttribute('data-src', binding.value, width);
    }
    inserted(el) {
        lazy.observe(el);
    }
}

Vue.directive('lazyLoad', lazyLoad);
Copy the code

The index file imports the file index.js

import './directive';
Copy the code

When using the.vue file, you can set v-lazyLoad directly to the DOM and upload a link to the image

<img v-for="item in imgData" :key="item.id" v-lazyLoad="item.imgUrl"/>
Copy the code

This way, when other components have similar images loaded, we can do a custom command instead of writing various calculations. The functions of vue3 instructions have been changed in Vue 3

  • Created – New! Called before an element’s attribute or event listener is applied.
  • The bind – beforeMount
  • He inserted – mounted
  • BeforeUpdate: New! This is called before the element itself is updated, much like a component lifecycle hook.
  • Update → Remove! There are too many similarities to update, so this is redundant, please use it insteadupdated.
  • ComponentUpdated – updated
  • BeforeUnmount: New! Similar to a component lifecycle hook, it is called before an element is unloaded.
  • unbind -> unmounted