9, custom instruction

Custom command

Note, Vue in all instructions to "v-" beginning

Use Vue.directive () define the global instruction

Among them, the parameters of 1: (do not need to add "v-", but must be added "v-" When you call the definition of) the name of the command

Parameter 2 is a object that the body, there are some instructions related functions, these functions may be particular phase, perform specific operations

The method body specific methods

No matter on which method, the first parameter is el, represents the binding element of that directive, the el parameter is a native js objects

  • bind: function () {} whenever instruction when bound to the element, it will execute this now bind function, performed only once
  • inserted: function () {} represents an element inserted into the DOM when inserted back to shape function, only this can start to be inserted into the DOM, that is to say this can be executed only at the outset
  • updated: function () {} When VNode update will be executed updated, it may trigger multiple times
<div id="app">
    <input type="text" v-focus>
</div>
<script>
    Vue.directive('focus',{
        inserted:function(el){
            el.focus()
        },
    })
    var vm=new Vue({
        el:'#app',
    })
</script>
实现文本框的一开始就获取焦点

High order, continued. . . .

Guess you like

Origin blog.csdn.net/weixin_33721427/article/details/91026132