2021-07-28

自定义全局指令

• 特点

如果一个页面，有多个vue实例则多个vue实例都可以用这个指令。

• 写法

Vue.directive(“指令名字”，配置对象)

指令名字不用加v-

指令的生命周期

bind:当指令被绑定到元素上执行 （改变样式等操作）
inserted:当元素被渲染到dom上时执行 （事件，比如聚焦）

 Vue.directive ("color"，{
  bind(el，obj)
  {
    //  el就是绑定这个指令的元素
    // obj 是一个对象  有name（指令名字），value（传递的参数）
      el.style.color=obj.value
  }.
    inserted()
    {
        操作
    }
 })
  <p v-color="‘blue’">11111</p> --注意指令后面是变量  所以要加引号证明是单词。
  

自定义局部指令

• 特点

只能在定义他的vue实例中使用

-写法

在vue实例中

directives:{
   'color'：{
       bind(el.obj)
       {
           el.style.color=obj.value
       }
   }
}