Vue自定义指令

最新推荐文章于 2023-07-19 09:32:51 发布

cZzzz666

最新推荐文章于 2023-07-19 09:32:51 发布

阅读量463

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cZzzz666/article/details/122241295

版权

Vue 自定义指令颜色切换钩子函数数据绑定

关键词由CSDN通过智能技术生成

除了常用的指令v-for v-shzow vue也可以自定义指令
自定义指令分为全局vue.directive 和局部的directives
局部的和data，methods同级全局的在main.js中定义
在标签上写 v-自定义指令名

自定义切换颜色

<p v-acolor="color" @click="change">111</p>
   data() {
        return {
          color:'red'
        };
    },
     methods: {
      change() {
        math.floor是向下取整  Math.random()是随机数
      //  Math.floor(Math.random()*255)
        this.color=`rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`
      }
    },

directives:{
自定义指令名字有三个参数
el绑定的元素
binding对象下面的name是指令名 value是指令的绑定的值
vnode是虚拟节点
acolor(el, binding, vnode) {
el.style.color=binding.value
}
}
自定义指令的五个钩子函数
bind只调用一次用于绑定元素
inserted:被绑定的元素到父节点是调用
update 组件更新时调用
componentupdated 组件更新后调用
unbind 只调用一次解绑时调用