Detailed explanation of obtaining dom elements through custom instructions in Vue

vue. js is a framework for data binding. In most cases, we don't need to directly operate DOM Element, but in some cases, we still need to obtain DOM Element.

In vue. js, a common way to get an DOM Element is to change this element into a component (component), and then pass the this.$el To get, but in a small project, in a project without building tools such as webpack, it is not so worthwhile to create a component, so vue provides another way to operate DOM elements, that is, custom instructions (directive);

The custom instruction function provides different hook functions in the lifecycle of DOM Element and allows us to listen for changes in the data bound by the instruction, but it also has the disadvantage that it cannot pass through the hook function of the instruction this To access the current vue instance, you can't go one step further to perform complex operations (although 1 generally doesn't require any complicated operations), and you can't look like in the hook function (lifecycle hook) and method (method) of vue this.$el Easy access to DOM elements bound by custom instructions;

However, as long as one point of flexibility is adopted, this restriction can be broken through:

HTML code:

    <div id="app">
      <span class='test' v-run="register('test1')"></span>
      <p class='test' v-run="register('test2')"></p>
    </div> 

JavaScript code:

const vm = new Vue({
  el:'#app',
  data : {
    elements : {}
  },
  directives : {
    run (el, binding) {
      if (typeof binding.value == 'function')
        binding.value(el);
    }
  },
  methods : {
    register (flag) {
      return (el)=>{
        this.elements[flag] = el;
      }
    }
  },
  beforeMount () {
    console.log(this.elements.test1); //=> undefined
  },
  mounted () {
    console.log(this.elements.test1); //=> the span DOM Element
    console.log(this.elements.test2); //=> the p DOM Element
  }
}) 

As shown in the code, create a file named run Custom instructions, run the binding method, and the current DOM Element as a parameter passed in;
At the same time, create a file named register Receives an flag parameter and returns an flag parameter based on this parameter to register the incoming parameter to the this.elements Closure function in object;

If you use the written run instruction and register method together, you can register the desired DOM into this. elements, and have 10 points of convenient access in hook or method;

Note: Custom instructions will be executed for the first time when the DOM element is inserted into Document, that is, when the component mount is inserted, so before this, such as beforeMount Hook is unusable, which is also the same as this.$el 1. For details, please check the life cycle diagram in the official document;

In fact, it is also very easy to understand... Before mount, there was no actual DOM element at all. How can you access... (: ①)