What are vue.js directives

vue.js instructions are many built-in instructions, such as [v-if] and [v-show]. These rich instructions can meet most of our business needs. Custom instructions have hook functions. Such as [bind, inserted, update].

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

[Related article recommendations: vue.js]

Question 1: What are custom instructions in vue.js?

Customize some instructions to operate on the underlying DOM

More references

Vue has many built-in instructions, such as v-if and v-show, These rich instructions can meet most of our business needs, but when we need some special functions, we still want to perform low-level operations on the DOM, and then we need to use custom instructions.

Question 2: Several hook functions of custom instructions

• bind: only called once, when the instruction is bound to an element for the first time transfer. 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.

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

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

Question 3: Hook function parameters

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.

The instruction hook function will be passed in the following parameters:

1. el: The element bound to the instruction can be used to directly operate the DOM.

2. Binding: an object containing the following attributes:

• name: Instruction name, excluding 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.

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

Question 4: How to use custom instructions in vue-cli?

File structure:

.
├── src
│   ├── directives
│   │    ├── index.js
│   │    ├── modules
│   └── main.js
└── ...

Create foucs.js under modules

// 聚焦指令
export default {
  bind (el, binding, vnode) {},
  inserted (el, binding, vnode) {
    el.focus()
  },
  update (el, binding, vnode) {},
  componentUpdated (el, binding, vnode) {},
  unbind (el, binding, vnode) {}
}

Under src/directives/index.js

import focus from './modules/focus'
export {focus}

Under src/main.js, use directives custom instructions

//引入自定义指令
import * as directives from './directives'
//注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

Use

<input v-focus type="text" />

in the .vue component. Related free learning recommendations: JavaScript (video )

The above is the detailed content of What are vue.js directives. For more information, please follow other related articles on the PHP Chinese website!