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

This article mainly introduces how to customize instructions in Vue, which is very detailed and has certain reference value. Friends who are interested must read it!

In addition to the built-in directives, Vue also allows you to register custom directives.

Custom instructions provide a behavior that maps changes in data to DOM

For example, when we want to use a function to represent focus

Vue.directive ('abc', {inserted:function (el) {/ / el is the element bound by the instruction el.focus ();}})

After the definition, how do we use it?

1) Hook function

Bind: called only once, the first time an instruction is bound to an element.

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 in which it is located is updated

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.

And the use of hook functions

Vue.directive ('abc', {bind:function () {/ / instruction to call} update:function (newVlue,oldVlue) {/ / call} unbind:function () {/ / instruction to unbind an element)

2) instruction function parameters:

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

Binding: an object that contains the following properties:

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.

3) literal quantity of object

If the instruction requires multiple values, you can pass in a JavaScript object literal, and the instruction can use any legal JavaScript expression

4) literal modifier

When an instruction uses a literal modifier, its value is processed as a normal string and passed to the update method, and the update method is called only once because the ordinary string cannot respond to data changes

5) element instruction

Sometimes we want to customize the form of elements to use instructions instead of attributes, which is when we need element instructions

HTML:

Vue:

Vue.elementDirective ('abc', {bind:function () {console.info (this.el.classname) console.info (this.el.getAttribute ("name")})) these are all the contents of the article "how to customize instructions in Vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.