vue 自定义指令

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

自定义指令

单文件组件中的局部自定义指令

• 创建局部自定义指令：

  // 创建局部指令
  directives: {
      指令名称：{
          inserted(el,binding,Vnode){
  ​
          }
      }
  }
  

• 特点：在组件内部创建的局部自定义指令只有在当前组件中可以使用，在组件外部无法使用

  • 使用说明

    • 参数说明

      • 指令id可由程序员自行定义，注意和系统指令名称有所区别，例如：focus,在某个元素上具体使用的时候请在 指令id前面再加上v-,例如<input v-focus>

      • 第二个参数是一个对象，其中inserted是一个函数，表示 “被绑定元素插入父节点时调用”

        • inserted的参数：

        • el参数：表示使用此自定义指令的dom对象

          • binding参数：一个对象，包含以下属性：

            • name：指令名，不包括 v- 前缀。
            • value：指令的绑定值，例如：v-focus="colorvalue", value 的值是colorvalue这个变量的值，colorvalue定义在data(){}中
            • expression：绑定值的字符串形式。例如 v-focus="colorvalue" ，expression 的值是 "colorvalue"

  • 使用局部自定义指令v-focus实现光标自动定位

      1、定义指令color
        Vue.directive('color',{
            inserted:function(el,binding){
              //将颜色设置给使用v-color指令的元素上
              el.style.color=binding.value;
            }
        });
    ​
    ​
      2、 在dom元素上使用指令，注意加上前缀 v-
      编号:<input type="text" v-model="product.id" v-color="colorvalue">
    ​
      3、在Vue对象实例中的data(){}中定义colorvalue
      data: {
          colorvalue:'red'
      }
    

全局自定义指令

• 创建方式：Vue.deriective(指令名称，配置)

• inserted钩子函数：当元素解析完毕，添加到dom树的时候触发

• 全局自定义在vm实例外创建(main.js文件中创建)

• 如何使用自定义指令

  • v-自定义指令的名称

  // 创建全局的自定义
  Vue.directive('focus',{
      // 添加inserted钩子函数
      // el:就是当前添加了这个指令的元素
      inserted(el){
          // 获取元素
          // 设置获取焦点
          el.focus()
      }
  })
  --------------使用------------------
  <input type="text" v-model='userdata.id' v-focus> 
  

• 细节：关于命名：

  • 如果命名是采用cemal命名法那么后期使用指令的时候需要使用-连接每一个单词
  • 建议：指令小写

• 指令参数传递

  • 使用的时候为自定义指令赋

    <input type="text" v-model='userdata.name' v-setcolor='color'>
    

  • 在定义的时候，通过inserted钩子函数的第二个参数binding获取数据

    inserted(el,binding,vnode){
        el.style.color = binding.value
        console.log(binding)
        console.log(vnode)
    }