深圳网站运营,制作品牌网页,廊坊网站建站建设,网站是什么样子的文章目录 自定义指令自定义指令-指令的值#xff08;给自定义指令传参数#xff09; 自定义指令
自定义指令#xff1a;自己定义的指令#xff0c;可以封装一些dom 操作#xff0c;扩展额外功能#xff08;自动聚焦#xff0c;自动加载#xff0c;懒加载等复杂的指令封… 文章目录 自定义指令自定义指令-指令的值给自定义指令传参数 自定义指令
自定义指令自己定义的指令可以封装一些dom 操作扩展额外功能自动聚焦自动加载懒加载等复杂的指令封装 全局注册可以在其他组件中使用 Vue.directive(指令名{inserted(el) {//可以对el标签扩展额外功能el.focus() //对元素的操作}
})局部注册只能在当前的组件中使用 directives: {指令名:{inserted(){//可以对el标签扩展额外功能el.focus() //对元素的操作}}
}页面上使用 input v-指令名typetext全局注册实例 局部注册实例 自定义指令-指令的值给自定义指令传参数 语法∶在绑定指令时可以通过“等号”的形式为指令绑定具体的参数值 div v-colorcolor我是内容/div通过binding.value可以拿到指令值指令值修改会触发update函数。 // 局部注册指令directives: {//指令名:指令的配置项color: {inserted(el, binding) {//binding可以接收来自指令中传过来的值el.style.color binding.value //处理的逻辑代码}}}自定义指令传参数的实例 注意由于Vue是响应式的特性自定义指令不会处理发生变化的数据即值从‘red’变成了‘blue’页面并不会更新这就要用到提供的update函数了。 inserted函数提供的是元素被添加到页面中时的逻辑。update函数指令的值被修改的时候会触发提供的是值变化后dom更新的逻辑。 update函数
