Simple Learning vue Instruction Directive_javascript Skills

This article has shared the Vue instruction directive use method, for everybody reference, the concrete content is as follows

1. Registration of Instructions

Instructions need to be registered to use the same as components, and there are two ways to do this, one is global registration:

Vue.directive (' DirName ', function () {

//define directive

});

The other is local registration:

New Vue ({

directives:{

dirname:{

//definition directive}}

);

2. Definition of Directives

Directive definition, the official provides five hook functions for our use, representing the individual lifecycle of a component

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

Inserted: Called when the binding element is inserted into the parent node (the parent node exists to be invoked without being in the 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 the update, you can ignore unnecessary template updates (detailed hook function parameters are shown below).

Componentupdated: Called when the template of the bound element completes an update cycle.

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

Here are a few other things to understand, about template update (update) Here, my understanding is: The template has changes in the instructions and need to be rendered again, such as when the model of an input box changes will trigger the instruction. Of course, the comparison is vague, and the concrete remains to be studied.

This code can implement the use of update

<div id= "App" > <input type= "text" v-focus= "name" v-model= "name":d ata-name= "name" > <button type= "Butto n "@click =" name= ' ZW ' ">click</button> <!--when the button is clicked, name changes, which triggers the method in update--> </div> <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 dynamically bound console.table ({name:binding.name, Value:binding.value, 
　　　　　　OldValue:binding.oldValue, Expression:binding.expression, Arg:binding.arg, Modifiers:binding.modifiers,
　　Vnode:vnode, Oldvnode:oldvnode});
　　}, Componentupdated:function (el, binding) {Console.log (' componentupdated: ', binding.name);
}
});
New Vue ({el: ' #app ', data:{name: ' Zwzhai '}});

 </script>

3. The definition of the hook function

The following are some of the official parameters:

El: An element that is bound by an instruction that can be used to manipulate the DOM directly.
Binding: An object that contains the following properties:
Name: Directive name, excluding the V-prefix.
Value: The binding values of the directive, for example: v-my-directive= "1 + 1", and value is 2.
OldValue: The previous value of the directive binding, available only in the update and componentupdated hooks. is available regardless of whether the value has changed.
Expression: The string form of the bound value. For example v-my-directive= "1 + 1", the expression value 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 modifiers value of the modifier object is {foo:true, bar:true}.
Vnode:vue compile the generated virtual node and consult the Vnode API for more details.
Oldvnode: The previous virtual node, available only in the update and componentupdated hooks.

These several parameters, we see the document can also understand, do not say, on the bingding of several attributes to say their own views, value this attribute, you can transfer literal, you can also flyer statement (as above), but also in the form of variables such as <input type= "text" v-focus= "name" v-model= "name" >;arg can pass a string here, because the value to access the binding is worth the time to get the one that is not directly written, that is to say v-focus= "name", this name is always a variable, You need to define an assignment, and arg can access the value directly, such as V-focus:foo, so you get the string foo in the hook function.

It is not possible to bind in bidirectional data in Vue directives, as the official says: Except for El, all other parameters should be read-only and try not to modify them. If you need to share data between hooks, it is recommended that you use the dataset for the element. This is supplemented by a knowledge of the dataset :

Data-is a new attribute of HTML5, check the browser support level, the current mainstream browsers are supported, ie words to more than 10. Specific use: In HTML in the way of attributes to write, data-yourname= "value", in JS to take this property does not use 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]:{}.

Finally attach yourself to write a Vue applet, simple page switching, using VUE-CLI build, simple version of sample, also used Mint-ui component library, git address: Https://github.com/Stevenzwzhai/news-vue

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.