目录一、什么是指令Vue 中常用的一些内置 v- 指令v-if 和 v-show 的对比二、自定义指令的钩子函数三、全局指令四、局部指令五、带参数的自定义指令六、函数简写七、应用实例
学习 vue 的时候肯定会接触指令，那么什么是指令呢？
在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性 <div v-xxx ></div>
比如在 angular 中 以 ng-xxx 开头的就叫做指令
指令中封装了一些 DOM 行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，会进行相关 DOM 操作的绑定，即可以进行一些模板的操作
<!----> 作为标记，若未来 v-if 的值是 true 了，就在这里插入元素（如果 if 有 else 就不要单独留坑了）。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁的切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好。
在实际的开发过程中，可能这些内置指令并不能满足所有的需求，或者说想为元素附件一些特别的功能。这时候，就需要用到 Vue 给我们提供的一个强大又灵活的功能「 自定义指令 」。
官方api 文档里有这么一句话：对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。也就是说自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。
Vue 提供了自定义指令的5个钩子函数：
注意：
1.除 update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数
2.在每个函数中，第一个参数永远是 el， 表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 js 对象，所以 Vue 自定义指令可以用来直接和 DOM 打交道
3.binding 是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers
4.oldVnode 只有在 update 与 componentUpdated 钩子中生效
5.除了 el 之外，binding、vnode 属性都是只读的
钩子函数说白了也就是生命周期，即当一个指令绑定到一个元素上时，这个指令内部有5个生命周期事件函数。接下来创建一个案例来看看这几个钩子函数的触发情况：
<p v-test>这是一段文字</p>
export default {
... ...
directives: {
test: {
bind () {
console.log('bind')
},
inserted () {
console.log('inserted')
},
update () {
console.log('update')
},
componentUpdated () {
console.log('componentUpdated')
},
unbind () {
console.log('unbind')
}
}
}
}结果：
页面渲染时，触发了 bind 和inserted 函数。那么另外三个钩子函数什么时候会触发呢？
关于 update 的官方解释：
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
有点疑惑，‘ 所在组件的 VNode ' 是指当前绑定了该指令的 dom 元素吗？如果是的话，是不是只要当前元素的状态发生了变化就会触发 update 呢？如下通过 v-show 来切换元素显示隐藏：
<p v-test v-show="show">这是另外一段文字</p>
<button @click="show = !show">toggle</button>
export default {
data () {
return {
show: true
}
}
}默认还是触发 bind 和inserted ，当点击按钮切换元素的 display 时，结果如下：
即：改变元素的样式的时候触发了 update 和componentUpdated 函数。如果使用 v-if 会触发哪个事件呢？
<p v-test v-if="show">这是另外一段文字</p>
<button @click="show = !show">toggle</button>结果：
发现 unbind 被触发，因为 v-if 是删除或者重建 dom 元素，当指令绑定的元素被销毁时，会触发指令的 unbind 事件，新建显示仍是触发 bind 和inserted 。
总结：
举几个应用场景的栗子
1、输入框自动获取焦点(官方示例)。
2、点击下拉菜单以外的区域隐藏菜单。
3、输入的邮箱、电话的校验。
上面这几个场合，在做项目的时候可以用其他方法代替，但是 vue 自定义指令能做到一处定义，全局调用，使得代码简洁高效，更便于维护。
指令的注册方式和「过滤器」「混入」「组件」注册的方式一样都分为两种：一是全局注册，二是局部注册。
// 给元素添加随机背景
<div v-bGColor></div>
Vue.directive('bgcolor', {
bind: function(el, binding, vnode) {
el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
}
})注意：在定义的时候，指令的名称前面不需要加 v- 前缀，在调用的时候，必须在指定的名称前加上 v-前缀来进行调用
// 和data, methods同级
methods: {},
directives: {
bgcolor: {
bind: function(el, binding) {
el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
}
}
}我个人更倾向于使用全局注册的方式，因为既然已经使用了自定义指令，应该是通用的可复用的。所以提供整个项目使用的指令才更有价值，而不仅仅只限于某个组件内部。如果单一地方使用直接把功能搂出来就行了，何必费这力气。
<div v-bgcolor='{color: 'orange'}'></div>
Vue.directive('bgcolor', {
bind: function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
})如果想在 bind 和 update 时触发相同行为，而不关心其它的钩子，可以这样写:
// 全局
Vue.directive('bgcolor', function (el, binding) {
el.style.backgroundColor = binding.value
})
// 局部
directives: {
bgcolor: (el, binding) => {
el.style.backgroundColor = binding.value
}
}熟悉指令的创建方式与参数之后，我们就用它来创建两个实际案例。
通过指令来实现点击空白处子菜单隐藏的功能，具体代码如下：
// clickOutside.js
export default {
bind (el, binding) {
const self = {} // 定义一个私有变量，方便在unbind中可以解除事件监听
self.documentHandler = (e) => {
if (el.contains(e.target)) { // 这里判断绑定的元素是否包含点击元素，如果包含则返回
return false
}
if (binding.value) { // 判断指令中是否绑定了值
binding.value(e) // 如果绑定了函数则调用那个函数，此处 binding.value就是handleClose方法
}
return true
}
document.addEventListener('click', self.documentHandler)
},
unbind (el) {
// 解除事件监听
document.removeEventListener('click', self.documentHandler)
delete self.documentHandler
}
}在组件中使用：
<template>
<div>
<div v-show="isshow" v-clickoutside="handleClickOutside" @click="showOrHide">
子菜单 ...
</div>
</div>
</template>
<script>
import clickoutside from './js/clickOutside'
export default {
... ...
directives: {
clickoutside
},
data() {
return {
isShow: true,
};
},
methods: {
handleOutsideClick () {
this.isShow = false
}
}
}
</script>自定义指令来优化图片的加载：图片在加载过程中，未加载完成时使用灰色背景占位，图片加载完后直接显示
<template>
<div>
<!-- 参数不可以直接填写url地址-->
<img v-imgUrl='url' />
</div>
</template>
<script>
export default {
data () {
return {
url: '../src/assets/loGo.png'
}
}
}
</script>
// 全局注册
Vue.directive('imgUrl', function (el, binding) {
el.style.backgroundColor = '#FEFEFE' //设置背景颜色
var img = new Image()
img.src = binding.value // binding.value 指令后的参数
img.onload = function () {
el.style.backgroundColor = ''
el.src = binding.value
}
})以上就是详解Vue自定义指令及使用的详细内容，更多关于Vue的资料请关注编程网其它相关文章！
--结束END--
本文标题: 详解Vue自定义指令及使用
本文链接: https://www.lsjlt.com/news/125655.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0