Vue command directive

This article for you to share the Vue Directive directive use method, for your reference, the specific content as follows

1. Registration of Instructions

Directives need to be registered to be used as a component, as well as in two ways, one is global registration:

Vue.directive (' DirName ', function () {//definition instruction});

Another type is partial registration:

New Vue ({directives:{dirname:{//definition directive}});

2. Definition of Directives

Directive definition, the official provides five hook functions for us to use, representing the individual life cycle of a component, respectively.

Bind: Called only once, when the instruction is first bound to an element, this hook function allows you to define an initialization action that is performed once at bind time.

Inserted: Called when the bound element is inserted into the parent node (the parent node exists to be called and does not have to exist in document).

Update: Called when the template that contains the binding element is updated, regardless of whether the binding value changes. By comparing the binding values before and after updates, you can ignore unnecessary template updates (see the detailed hook function parameters below).

Componentupdated: Called when the template on which the binding element is completing an update cycle.

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

Here are a few others to understand, about template update (update) Here, I understand that the directive is where the template changes and needs to be re-rendered, such as when the model of an input box has changed, will trigger the instruction. Of course, this is relatively vague, and the specific needs to be studied.

This code can be used to implement the update

<p id= "App" > <input type= "text" v-focus= "name" v-model= "name":d ata-name= "name" > <button type= "button" @ 　　click= "Name= ' ZW '" >click</button> <!--when the button is clicked, the name changes and the method in update is triggered--></p><script>　　Vue.directive (' Focus ', {bind:function (El, binding) {Console.log (' bind: ', binding.value);　　}, Inserted:function (el, binding) {Console.log (' Insert: ', binding.value);　　　　}, Update:function (EL, binding, Vnode, Oldvnode) {el.focus (); Console.log (el.dataset.name);//The data here is console.table ({name:binding.name, value:binding.value, old) that can be dynamically bound Value:binding.oldValue, Expression:binding.expression, Arg:binding.arg, Modifiers:binding.modifiers, V　　Node:vnode, Oldvnode:oldvnode});　　}, Componentupdated:function (el, binding) {Console.log (' componentupdated: ', binding.name); }}); new Vue ({el: ' #app ', data:{name: ' Zwzhai '}});</script>

3. Definition of hook function

Here are a few of the official parameters:

El: The element that the directive binds to, which can be used to manipulate the DOM directly.
Binding: An object that contains the following properties:
Name: the directive name, excluding the V-prefix.
Value: The binding value of the directive, for example: v-my-directive= "1 + 1", value is 2.
OldValue: The previous value of the directive binding, available only in update and componentupdated hooks. It is available regardless of whether the value is changed.
Expression: The string form of the bound value. For example v-my-directive= "1 + 1", the value of expression is "1 + 1".
ARG: The argument passed to the instruction. For example, V-my-directive:foo, the value of arg is "foo".
Modifiers: An object that contains modifiers. For example: V-my-directive.foo.bar, the value of the Modifier object modifiers is {foo:true, bar:true}.
Vnode:vue compile the generated virtual node, consult the Vnode API for more details.
Oldvnode: The previous virtual node is available only in the update and componentupdated hooks.

These parameters, we see the document can understand, not much to say, about bingding several properties say their own views, value this property, can be passed literal, can also be a flyer bar statement (such as above), but also in the form of variables such as <input type= "text" v-focus= "name" v-model= "name" >;arg here can pass a string, because in the value to access the binding is not the time to get to the one that is not directly written, that is, v-focus= "name", this name is always a variable, The assignment needs to be defined, and ARG can directly access the value, such as V-focus:foo, and the string of Foo is the one that gets in the hook function.

In Vue's instructions, it is not possible to bind two-way data, as the official said: except El, other parameters should be read-only, try not to modify them. If you need to share data between hooks, it is recommended to do so through the element's dataset. Here are some additional information about datasets:

Data-is a new attribute of HTML5, check the browser support level, the current mainstream browser is supported, ie words to more than 10. Specific use: In the HTML in the way of property to write, data-yourname= "value", in JS to take this attribute is not used getattribute this method, but direct access, Ele.dataset.yourname, In JS you can also add and delete, add: ele.dataset.dessert= "yourname", delete: Dette ele.dataset.name. In addition, this property can be used as a CSS selector:. class[data-name]:{}.

The above is VUE Directive directive content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

