自定义指令

自定义指令

全局指令

全局都可以使用的指令

• 格式：Vue.directive(name,option){}
  • name 指令名字， 使用方式 v-name
  • option
    • Object:放钩子函数（也叫生命周期函数）
    • Function：默认为bind 和 update的钩子函数

//全局指令的定义
 Vue.directive('lh',{   //v-ih 为指令名字，调用方式与系统的指令一致
    //初始化执行函数，在此写指令的功能
     bind:function(el,binding){ //el：绑定了该指令的元素，binding：指令的属性
        //例：配置一个阻止冒泡的修饰符,假设修饰符为 stop
        if(binding.modifiers.stop){ //modifiers ：指令的修饰符属性，更多见钩子函数解析
            event.stopPropagation();
        }
     },
     //元素插入到页面后执行的函数
     inserted(el,binding){
				//需要实现的功能函数放在这里
     }
 })

自定义局部指令

• 格式 directives:{}
  在实例化中配置参数时定义，局部指令，只在当前实例下才能用。以下是自动获取焦点的指令，原生的获取焦点的指令为：autofocus 属性即可

 let vm = new Vue({
         //爸实例挂载到#app中
        el: "#app",
        data: {
        },
        //布局定义的指令 调用 v-ff
        directives: {
            ff: {
                bind(el) {
                },
                // 指令的定义
                inserted(el) {
                    el.focus()
                }
            }
        }
    });