指令
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: 当标签解除自定义指令的时候触发
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战