其他分享
首页 > 其他分享> > Vue自定义指令

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>

标签:el,Vue,自定义,绑定,指令,inserted,节点
来源: https://www.cnblogs.com/user-001/p/15632662.html