Vue自定义指令

自定义指令

指令 就是在vue中v-前缀的html特殊属性

指令 是有限的就那几个 但是如果我想用的功能没有的怎么办？

自定义指令--------- 就是我们自己定义指令

 

5个钩子要记住

 

<template>
  <div class="about">
    <h1>自定义指令</h1>
    <!-- 自定义指令使用的时候使用v-你的自定义指令名字 -->
    <input type="text" v-xiaoming/>
    <p v-xiaohong>测试自定义指令</p>
  </div>
</template>
​
<script>
export default {
    directives:{
      xiaoming:{
        // bind：绑定指令到元素上，只执行一次
​
        // inserted：绑定了指令的元素插入到页面中展示时调用，基本上都是操作这个钩子函数
​
        // update：所有组件节点更新时调用
​
        // componentUpdated：指令所在组件的节点及其子节点全部更新完成后调用
​
        // unbind：解除指令和元素的绑定，只执行一次
        // el这个形参就是当指令绑定到那个dom元素上  形参el就是谁
        inserted(el){
            el.focus()
        }
      },
      xiaohong:{
        inserted(el){
          el.style.color="red";
        }
      }
    }
}
</script>