Vue2.0 Notes - Custom Instructions

custom directive

Custom directives are mainly used for low-level operations on the DOM by themselves, in addition to those provided by the system.
For example, a text box needs to automatically gain focus when the page loads. As long as you haven't clicked anything since opening the page, the input box should still be focused.

We explain the autofouce case through global custom directives and local custom directives.

Global custom directive

Register or get global directives through Vue.directive( id, [definition] ) in the global API .
parameter:

• id represents the custom command name
• definition is the definition of a custom instruction, which can generally contain several life cycle hook functions
• bind() is called when the instruction is bound to the element for the first time, and it is called only once to perform the initialization operation
• inserted() is called when the bound element is inserted into the DOM
• update() is called when the template where the bound element is located is updated
• componentUpdated() is called when the template where the bound element is located completes an update cycle
• The unbind() instruction is called when the element is unbound, and it is called only once

bind and inserted call update after loading the page initialization instance and mount it , componentUpdated is called when the element template bound to the instruction is updated and
unbind is called when unbinding

grammar:

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

Example:

//el参数为绑定的元素，自动载入
Vue.directive('focus',{
    inserted:function(el){
        console.log(el);
        el.focus();
    }
});

<div id="app">
    <input type="text" v-focus>
</div>

2. Of course, you can also use simple command functions.

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

3. We can add two parameters to the bind function, the first is the element to be bound, and the second is the current custom instruction object.

Vue.directive('focus',{
    bind(el,binding){
        console.log(binding);
    }
});

Local, instance custom directive

Local custom directives are defined in the directives option , and the configured data is exactly the same as the global one.

directives:{
    focus:{
        inserted(el){ //当被绑定元素插入到DOM的时候，进行自动获焦
        el.focus();
    }
}

focus is the command name, which can be used directly, just v-focus.

The el parameter and the binding parameter, get the binding element and the current instruction object to get the value only after the bind function is bound. So inserted, update is also possible.