指令

1、自定义全局指令

作用域:可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用

语法: Vue.directive(指令名, 对象)

对象中定义了 该指令的所有生命周期函数(也叫钩子函数)方法

Vue.directive('redbackground',{
bind(el,binding){
console.log(this);
el.style.background = 'red';
}
})
全局自定义注册指令简写:
Vue.directive('redbackground',(el,binding)=>{el.style.background = 'red';})

2、自定义局部指令

作用域:只能在当前定义的组件中使用

语法:directives: {指令名:对象}

directives: {指令名(){}}

const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
directives: {
// 自定义局部对象方式
yellow: {
bind(el, binding) {
// console.log('bind');
el.style.background = 'yellow'
}
},
// 自定义局部函数方式
// yellow(el, binding) {
// }
}
})

3、自定义参数el,binding

el:代表当前绑定指令的元素

binding:表示当前指令的参数对象,值为binding.value

4、指令生命周期

  • bind: 当指令绑定在标签上时就触发的函数,特点: 无法获取到父元素(该时间段当前的标签还没有挂载到父元素上)
  • inserted: 当绑定指令的元素 插入到父节点时候触发 特点: 可以获取到父元素,操作父元素了
  • update: 表示当前绑定指令的元素上的数据更新的时候触发 (注意: 表示数据更新的时候触发)
  • componentUpdated: 表示组件(标签)更新的时候触发
  • unbind: 当标签解除自定义指令的时候触发
posted @   丫丫learning  阅读(321)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示