vue directive directive

This article shares how to use the Vue directive directive for your reference. The specific content is as follows

1. Registration of directives

Directives need to be registered just like components before they can be used. There are also two ways, one is global registration:

Vue.directive('dirName',function(){
 
　　//定义指令
 
});

The other is partial registration:

new Vue({
 
　　directives:{
 
　　　　dirName:{
 
　　　　　　//定义指令
 
　　　　}
 
　　}
 
});

2. Definition of command

Instruction definition, the official provides five hook functions for us to use, each representing a component Each life cycle of

bind: is only called once. It is called when the instruction is bound to the element for the first time. This hook function can be used to define an initialization action that is executed once when binding.

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

update: Called when the template where the bound element is located is updated, regardless of whether the binding value changes. By comparing the binding values ​​before and after the update, unnecessary template updates can be ignored (see below for detailed hook function parameters).

componentUpdated: Called when the template where the bound element is located completes an update cycle.

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

The others here are easy to understand. Regarding template update (update), my understanding is: when the template where the instruction is located changes and needs to be re-rendered, for example, when the model of an input box changes, it will Trigger command. Of course, what is said here is rather vague, and the details still need to be studied.

This code can realize the use of update

<p id="app">
　　<input type="text" v-focus="name" v-model="name" :data-name="name">
　　<button type="button" @click="name=&#39;zw&#39;">click</button>
 
　　<!--当点击按钮的时候name改变，继而触发update中的方法-->
</p>
<script>
 
　　Vue.directive(&#39;focus&#39;,{
　　　　bind: function(el, binding){
　　　　console.log(&#39;bind:&#39;,binding.value);
　　},
　　inserted: function(el, binding){
　　　　console.log(&#39;insert:&#39;,binding.value);
　　},
　　update: function(el, binding, vnode, oldVnode){
　　　　el.focus();
　　　　console.log(el.dataset.name);//这里的数据是可以动态绑定的
　　　　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(&#39;componentUpdated:&#39;,binding.name);
　　}
});
new Vue({
　　el:&#39;#app&#39;,
　　data:{
　　　　name:&#39;zwzhai&#39;
　　}
});
</script>

3. Definition of hook function

The following are several parameters provided by the official:

el: The element bound by the instruction can be used Directly manipulate the DOM.
binding: An object containing the following properties:
name: Instruction name, excluding v- prefix.
value: The binding value of the directive, for example: v-my-directive="1 + 1", the value of 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: String form of binding value. For example v-my-directive="1 + 1" , the value of expression is "1 + 1".
arg: Arguments passed to the command. For example v-my-directive:foo, the value of arg is "foo".
modifiers: An object containing modifiers. For example: v-my-directive.foo.bar, the value of modifier object modifiers is { foo: true, bar: true }.
vnode: The virtual node generated by Vue compilation, check VNode API for more details.
oldVnode: The previous virtual node, only available in update and componentUpdated hooks.

You can understand these parameters by reading the document, so I won’t go into details. Let me share my views on several attributes of bingding. The value attribute can be passed in literals or in single statements (as above) , it can also be in the form of a variable such as ; arg can pass a string here, because when value accesses the binding value What you get is not the one written directly, that is to say v-focus="name". This name is always a variable and needs to be defined and assigned, and arg can directly access the value, such as v-focus:foo, then in the hook What is obtained in the function is the string foo.

Bidirectional data binding is not allowed in vue instructions. As the official said: except for 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 it through the element's dataset. Here is some additional knowledge about dataset:

data- is a new attribute of HTML5. After checking the browser support level, all current mainstream browsers support it. For IE, it must be 10 or above. Specific usage: Write it as an attribute in HTML, data-yourname="value". To get this attribute in js, you don't need to use the getAttribute method, but access it directly, ele.dataset.yourname, in js you You can also add and delete, add: ele.dataset.dessert="yourname", delete: dette ele.dataset.name. Additionally, this attribute can be used as a css selector: .class[data-name]:{}.

The above is the content of the vue instruction directive. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!