创建Vue的自定义指令

1.注册全局指令

<div id="app" >
<div v-uper="msg"></div>
</div>

Vue.directive('uper',{                       //uper指令名 
inserted:function(el,binding){               //inserted为钩子函数，对于插值操作，在inserted钩子函数中操作。
                                             // 函数的第一个参数el是原生dom对象，、第二个参数binding是用于获
                                             //取当前指令的绑定值（value），表达式（express），指令名（name）

el.innerHTML=binding.value.toUpperCase()
 } })

2.创建自定义Vue指令，将dom原生对象打印在控制台上

<div id="app" >
<div v-dom>德拉克洞窟</div>               //使用指令
</div>
    
Vue.directive('dom',{                    //创建全局指令
inserted:function(el,binding){            
 console.log(el);
}
})

3.创建全局指令，绑定文本的样式

<div id="app" v-cloak>
    <div v-color>德拉克洞窟浪费</div>
    </div>
    
Vue.directive('color',{
bind:function(el,binding){      //对于初始化的操作，在bind钩子函数中进行操作  bind函数只调用一次

 el.style.color="red"  
}
})

4.创建局部指令，自动获取焦点

<div id="app" v-cloak>
        <input type="text" v-focus>              //使用局部指令
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
             
            },
            directives: {                        //创建全局指令

       'focus':
     { 
      inserted: function (el, binding) 
     { 
      el.focus() 
     }
     } } })

 

自定义获取焦点，初始插入时调用inserted函数，当值发生改变时，调用update函数

Vue.directive(

        'focus',{

            inserted(el,binding){

           el.focus()

            },

            update(el,binding){

                if(binding.value){    //当绑定值为true时，获取焦点

                    el.focus()

                }

                

                 }

        }

    

        )