Vue中的自定义指令

全局指令
下面是针对光标聚焦写的一个自定义指令。
使用directive方法可以定义一个指令，定义的指令名XX可以通过v-XX来给标签使用。标签使用指令时，指令定义中的生命周期函数可以接收到挂载的元素，从而对元素进行操作。

const app = Vue.createApp({template:`<div><input v-focus />      </div> `
}); app,directive('focus',{mounted(el){el.focus();}
})

局部指令

const directive = {focus:{mounted(el){el.focus();}}
}const app = Vue.createApp({directives:directive,template:`<div><input v-focus />      </div> `
});

参数第二位的binding对象
生命周期函数的参数第二位是一个对象，从这个对象中可以获取到使用时后面跟的值和绑定的属性。.
binding.value可以拿到后面跟的值（v-pos = ‘100’），而binding.arg可以拿到绑定值的名字（v-pos:xxx = ‘distance’，binding.arg拿到的就是xxx）。

binding.value

const app = Vue.createApp({template:`<div><div v-pos = '400'><input v-focus />   </div>   </div> `
}); app,directive('pos',{mounted(el,binding){el.style.top = binding.value + 'px'}
})

binding.arg

const app = Vue.createApp({data(){return{distance:100}},template:`<div><div v-pos:left = 'distance'><input  />   </div>   </div>
}); app.direction('pos',(el,binding) => {el.style[binding.arg] = binding.value + 'px'
})

由于有时候，生命周期函数mounted和updated的内部函数是一样的，这个时候可以使用Vue3的简化写法

app.direction('pos',(el,binding) => {el.style.top = binding.value + 'px'
})等价于：app,directive('pos',{mounted(el,binding){el.style.top = binding.value + 'px'},updated(el,binding){el.style.top = binding.value + 'px'}
})

Vue中的自定义指令相关推荐

vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写新建一个 pinyin.js 文件这是一串又臭又长的un ...
vue中如何自定义指令
目录一. 什么是自定义指令二. 如何自定义指令三.应用场景实现输入框防抖图片懒加载一键 Copy的功能拖拽下拉菜单相对时间转换一. 什么是自定义指令我们看到的v-开头的行内属性, ...
vue中如何自定义指令directive
一. 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-mode ...
手把手教你在vue中使用自定义指令全局封装防抖节流函数
第一步在src下创建utils文件夹并创建common.js文件 //'@/utils/common.js' 文件function throttle(bindObj, fn, delay) {bind ...
Vue项目中的自定义指令
Vue项目中的自定义指令使用场景:需要对DOM元素进行底层操作局部自定义指令当指令第一次被绑定到元素上的时候,会立即触发 bind() 1 定义与 data 同级在 directives 节 ...
vue单文件自定义指令的封装
vue单文件自定义指令的封装第一步(封装一个js文件) // 暴露并配置指令功能添加背景颜色 export const mycolor = {// 解析结构完成后自动运行钩子函数inser ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
Vue.js中的自定义指令directives
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.自定义指令,需要声明钩子函数.注册自定义指令也分为注册全局自定义指令和注册局部自定义指令.两者用法相同, ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
vue基础4——自定义指令
自定义指令自定义指令中的this指向window <div id="root"><h2>当前的n值是:<span v-text="n&qu ...

Vue中的自定义指令

Vue中的自定义指令相关推荐

最新文章

热门文章