Shulou(Shulou.com)06/01 Report--

This article mainly analyzes the relevant knowledge points of the example analysis of vue custom instruction directives and its common hook functions, the content is detailed and easy to understand, the operation details are reasonable, and has a certain reference value. If you are interested, you might as well follow the editor and learn more about the "sample analysis of the vue custom instruction directives and its common hook functions".

Custom instruction directives and description of Common Hook functions

In addition to the default built-in directives for core functions (v-model and v-show), Vue also allows you to register custom directives

Where to use: in some cases, you still need to perform underlying operations on ordinary DOM elements, so custom instructions will be used.

Hook function

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).

Bind: called only once, the first time an instruction is bound to an element. One-time initialization settings can be made here.

Update: called when the VNode of the component in which it is located is updated, but may occur before its child VNode update. The value of the instruction 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 and its child VNode of the component to which the instruction belongs are all updated.

Unbind: called only once, when the instruction is unbound from the element.

Vue global definition

Using: welcome can also v-instruction name = "passed parameter"

Definition: Vue.directive (instruction name, {instruction hook: function})

Welcome Vue.directive ('red', {/ / define ⬅⬅⬅ inserted:function (el) {/ / hook function ⬅⬅⬅ el.style.background =' red';}}) Var vm = new Vue ({el: "# root" data: {},}) Local definition (vue-cli)

Use: / / pass parameters to operate according to functional requirements

Definition: directives {instruction name: {Hook function: function}}

Export default {data () {return {name:'userName',}}, directives: {/ / Custom directive ⬅⬅⬅ test: {inserted: function (el,binding) {/ / e is a binding element, which can be dom console.log (binding) / / an object Contains many properties (below)}, bind: function (el, binding, vnode) {el [XSS _ clean] = binding.value}, methods: {...}} parameters in the hook function

El: the element bound by the instruction that can be used to directly manipulate the DOM.

Binding: an object that contains the following property:

Name: instruction name, excluding the v-prefix.

Value: the binding value of the instruction, for example: in "1 + 1", the binding value is 2.

OldValue: the previous value bound by the instruction, available only in update and componentUpdated hooks. Available regardless of whether the value changes or not.

Expression: instruction expression in the form of a string. For example, in "1 + 1", the expression is "1 + 1".

Arg: the parameter passed to the instruction, optional. For example, in v-my-directive:foo, the parameter is "foo".

Modifiers: an object that contains modifiers. For example: in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.

The virtual node generated by vnode:Vue compilation.

OldVnode: the last virtual node, available only in update and componentUpdated hooks.

Vue custom directives directives options define directives in the directives option

Add a v-prefix when in use

Global registration

App.directive ('xxx', {})

Support for dynamic instruction parameters

V-xx: [abc] = 'xxx'

The instruction function can accept all valid JavaScript expressions.

If the method only needs to be triggered by the hook at the time of mounted and updated

Can be abbreviated to a simple callback function

Parameter description

The first parameter is the bound element

The second parameter is the passed object

Parameters bound to .arg

The corresponding value after the .value equal sign

When applied to a component, unlike a non-prop attribute, the instruction is not passed into another element via vMub bind = "$attrs".

When applied to a component with multiple nodes, the instruction is ignored and a warning is thrown.

On the "vue custom instruction directives and its common hook function example analysis" is introduced here, more related content can search the previous article, hope to help you answer questions, please support the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.