Learning and understanding of Vue custom instructions (code examples)

The content of this article is about learning and understanding Vue custom instructions (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I have completed my final design recently and need to implement a scene. Click on an area and an editing area will pop up. When clicking elsewhere on the page, the editing area will be hidden. I wanted to write it the same way I wrote the modal box before. When looking for a method, I suddenly thought that I could try to use vue-related things to solve this problem elegantly, and then I learned the following custom instructions.

1 Vue custom instructions

1.1 Definition

Just look at the introduction on the official website (I think the official document is very clear, so I basically They were all copied from him).

In addition to the default built-in directives (v-model and v-show) of the core functions, Vue also allows the registration of custom directives. Note that in Vue2.0, the main form of code reuse and abstraction is components. However, in some cases, you still need to perform low-level operations on ordinary DOM elements, in which case custom directives are used.

1.2 Basic implementation

This can be divided into two situations. If you want to define a global custom component, then define it in main.js in the project, for example, define an official website Auto-focus instructions

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

If you just want to define a local instruction for use inside a certain component, then define it in the corresponding component

// 跟 data(),methods:{} 那些同级写了
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

After the definition is completed, we can I happily used it

<input v-focus>

1.2 Hook function

Of course, this custom instruction will not be just a little thing. In order to solve some real-life scenarios, Vue gives us a bunch of hook functions to implement Some of our dirty tricks. The details are as follows (all are optional):

bind: Called only once, when the instruction is bound to an element for the first time. One-time initialization settings can be performed here.

inserted: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

update: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the directive 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).

componentUpdated: Called after all the VNode of the component where the instruction is located and its sub-VNodes have been updated.

unbind: Called only once, when the instruction is unbound from the element.

Next let’s take a look at the parameters of the hook function (i.e. el, binding, vnode and oldVnode).

Of course, if you want to make good use of this hook function, you must know how to use the following parameters

1.3 Hook function parameters

The command hook function will be passed in the following parameters ：

el: The element bound by the instruction can be used to directly manipulate the DOM.

binding: An object containing the following properties:

name: Instruction name, excluding the v- prefix.

value: The binding value of the directive, for example: - v-my-directive="1 1", the binding value is 2.

oldValue: The previous value of the instruction binding, only available in update and componentUpdated hooks. Available regardless of whether the value has changed.

expression: Instruction expression in string form. For example, in v-my-directive="1 1", the expression is "1 1".

arg: Parameters passed to the command, optional. For example, in v-my-directive:foo, the parameter is "foo".

modifiers: An object containing modifiers. For example: in v-my-directive.foo.bar, the modifier object is { - foo: true, bar: true }.

vnode: The virtual node generated by Vue compilation. Move to VNode API to learn more details.

oldVnode: The previous virtual node, only available in update and componentUpdated hooks.

Then the official website has something to say

Except for el, all other parameters should be read-only and must not be modified. If you need to share data between hooks, it is recommended to do it through the element's dataset.

Then let’s give a simple example below

// 在组件内部定义一个局部指令
directives:{
  demo:{
    bind: function (el, binding, vnode) {
      var s = JSON.stringify;
      el.innerHTML = 
        `name: ${s(binding.name)} <br>
        value: ${s(binding.value)} <br>
        expression: ${s(binding.expression)} <br>
        argument: ${s(binding.arg)} <br>
        modifiers: ${s(binding.modifiers)} <br>
        vnode keys: ${Object.keys(vnode).join(', ')}`
    }
  }
}
 // 绑定到组件中的一个 div 中
<div v-demo:foo.a.b="message"></div>

Then we can see such a bunch of text on the web page (of course the comments below are written by myself)

name: "demo" 
// 指定名称
value: "Welcome to Your Vue.js App" 
// 指令绑定值
expression: "message" 
// 字符串形式的指令表达式
argument: "foo" 
// 传给指令的参数
modifiers: {"a":true,"b":true} 
// 修饰符的对象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 编译生成的虚拟节点

1.4 Function abbreviation

In many cases, you may want to trigger the same behavior during bind and update, without caring about other hooks. For example, write like this:

colorSwatch: function colorSwitch(el, binding) {
  el.style.backgroundColor = binding.value
},

1.5 Object literal

If the instruction requires multiple values, you can pass in a JavaScript object literal. Remember, directive functions accept all legal JavaScript expressions.

<div v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></div>

rrree

The above is the detailed content of Learning and understanding of Vue custom instructions (code examples). For more information, please follow other related articles on the PHP Chinese website!