3X1 Intensive reading Vue official documentation – custom instructions

Close read Vue official documentation series 🎉

Introduction to the

Vue commands can be divided into “built-in commands (such as V-once and V-cloak)” and “custom commands”. The Vue directive provides the ability to manipulate the underlying DOM, enhancing the processing capabilities of the Vue template.

• Local registration instruction, you can use component optionsdirectives 。
• Global registration instructionNeed to call the Vue constructorVue.directive()methods

Hook function

Directives are structured like component options, with their own unique hook functions.

• Bind: Called only once, when a directive is bound to an element, at which point the element can be initialized (such as event binding).
• Inserted: Called when the bound element is inserted into the parent node (there is no guarantee that the parent node itself has been inserted into the document).
• Update: called before the component is updated.
• ComponentUpdated: Called after a component is updated.
• unbind: called only once, when directives are unbound from elements, for examplev-ifControl components.

bind 与 insertedThe difference between

Vue.directive('dom', {bind(el){
    console.log(el.offsetWidth); / / 0
    console.log(el.parentNode);  //null
  },
  inserted(el){
    console.log(el.offsetWidth); / / 1170
    console.log(el.parentNode);  //<div msg="Welcome to Your Vue.js App"><button>click</button><div>false</div></div>}})Copy the code

update 与 componentUpdateddifferences

The difference is more like beforeUpdate versus updated.

<button @click="show = ! show">click</button>
<div v-dom>{{ show }}</div>
Copy the code

At this point, click the button to switch the value of responsive data show to true and observe the output of the custom instruction:

Vue.directive("dom", {
  update(el) {
    console.log("update", el.innerHTML); //'update false'
  },
  componentUpdated(el) {
    console.log("componentUpdated", el.innerHTML); //'componentUpdated true'}});Copy the code

There is no Vue instance in the custom directive hook. This points to undefined by default.

Hook function arguments

Complete command structure:

<span v-directiveName:argument.modifier="show"></span>
Copy the code

If it is abstract, then substitute the actual example to understand:

<button v-on:mousemove.passive="doSomeThing"></button>
Copy the code

The hook method of the Vue directive accepts the following four arguments:

1. el: The element bound by the current directive.
2. binding: Information about the instruction itself, and the value is an object.
   • name: Indicates the name of the directive.
   • rawName: Full original name, includingv-*Prefix.
   • value: Indicates the value of the instruction.
   • expression: Expression of an instruction.
   • arg: Parameters passed to the instruction. Dynamic parameters are supported.
   • modifiers: Modifiers for instructions.
   • oldValue: The previous value of the directive binding, available only in the UPDATE and componentUpdated hooks. Available regardless of whether the value changes.
3. vnode: virtual node generated by Vue compilation.
4. oldVnode: Last virtual node, available only in update and componentUpdated hooks.

value 与 expressionThe link

A Vue directive can be invoked to receive the value of an “expression” in the form of a string specified by JavaScript (the core is the value of the directive). And value is the value of expression after the final calculation.

v-calc="1 + 1"
//expression "1+1"
//value 2;
Copy the code

Common expressions, such as primitive expressions, arithmetic expressions, initialization expressions for objects and arrays, call expressions, and so on.

Dynamic instruction parameter

The parameters of an instruction can be dynamic. For example, in v-DOM :[argument]=”value”, the argument argument can be updated based on the responsive data of the component instance, which makes custom instructions flexible in the application.

Vue.directive("dom", {
  bind(el, binding) {
    if (binding.arg === "color") {
      el.style.color = binding.value;
    } else if (binding.arg === "background") { el.style.background = binding.value; }}});Copy the code

How to use commands:

<div v-dom:background="'red'">{{ show }}</div>
<div v-dom:color="'green'">{{ show }}</div>
Copy the code

Returns the registered directive

Vue.directive('directiveName'); 
Copy the code