自定义指令

自定义指令：自己定义的指令，可以封装一些 dom 操作，扩展额外功能

 

语法：

（无论是全局方式定义指令 还是 局部方式定义指令，最终 只要把指令定义完成，页面当中用起来  只需要 eg : <input   v-指令名   type = "text" > 。只要一绑上，在当前输入框被插入到页面当中的时候，就会自动执行 inserted 钩子）

1. 全局注册：

Vue.directive ( ' 指令名 ' ,  { // 指令的配置项，在配置项当中需要写跟指令相关的钩子

        inserted ( el )  {   

             // inserted 就是指令的生命周期钩子，表示当前指令所绑定的元素被添加到页面当中的时候  会自动调用。形参 el 就可以拿到指令所绑定的元素

            // 可以对 el 标签，扩展额外功能

            el.focus ()  // 获取焦点

      }

})

 

2. 局部注册：

directives : {

        指令名 : {

            inserted ( el ) {

                  el.focus ()

            }

      }

}

 

 ----------------------------------------------------------------------------------------------------------------------

 

指令的值：

语法：在绑定指令时，可以通过 “ 等号 ” 的形式为指令 绑定  具体的参数值

             （eg：<div  v-color = " yanse " > 我是内容 </div> ；yanse 是 data 函数里定义的变量，比如 yanse = ' red '）

           通过 binding.value 可以拿到 指令值 yanse ，指令值修改会 触发 update 函数

 

directives : {

      color : {

            inserted ( el ,  binding) { // 元素被添加到页面中时就立刻将 binding.value 赋值给 el.style.color 

                  el.style.color = binding.value

            } ,

            update ( el ,  binding ) {

             // 指令值 yanse 在被修改的时候，比如将 yanse 的值由 red 改为 blue，就会触发这个 update 函数，提供值变化后，dom 更新的逻辑

                  el.style.color = binding.value

            }

      }

}