Vue.js中的自定义指令directives

最新推荐文章于 2022-08-02 20:39:44 发布

大口喝脉动

最新推荐文章于 2022-08-02 20:39:44 发布

阅读量979

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_48683341/article/details/118530175

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。自定义指令，需要声明钩子函数。注册自定义指令也分为注册全局自定义指令和注册局部自定义指令。两者用法相同，局部指令只能在当前组件里面使用。当全局指令和局部指令同名时以局部指令为准。

1. 自定义指令中的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind、inserted、update、componentUpdated和unbind。

bind => 指令被绑定到元素上时执行，只会执行一次
inserted => 被绑定的元素被插入到父节点时执行，只会执行一次
update => 当虚拟DOM被重新渲染时执行
componentUpdated => 当虚拟DOM重新渲染完成后执行
unbind => 指令与元素解绑时调用，只会执行一次

2. 钩子函数中的参数

指令钩子函数会被传入以下参数：el、binding、vnode和oldVnode。

el => 被绑定的DOM对象
binding => 是一个包含了指令的所有属性的对象，例如：name、rawName、value
vnode => Vue 编译生成的虚拟节点
oldVnode => 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

3. 动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

下面我们通过一个案例来看一下。

<body>
		<div id="app">
			{{i}} <button @click="i++">+</button>
			<div v-red>Hello</div>
			<!-- 动态指令参数：通过改变value值，可以改变参数从而进行数据更新 -->
			<div v-color="'pink'">测试</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					i: 0
				},
				directives: {
					red: { //自定义red指令，需要声明钩子函数
						bind(){
							console.log('bind...')
						},
						inserted(el){
							console.log('inserted...', el)
							// el.style.color = 'red'
							// console.log(el.style)
							el.style.color = 'red'
						},
						update(){
							console.log('update....')
						},
						componentUpdated(){
							console.log('componentUpdated...')
						},
						unbind(){
							console.log('unbind...')
						}
					},
					color: {
						inserted(el,binding){
							console.log(binding)
							el.style.color = binding.value
						}
					}
				}
			})
		</script>
	</body>

大口喝脉动

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.js中的自定义指令directives

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。自定义指令，需要声明钩子函数。注册自定义指令也分为注册全局自定义指令和注册局部自定义指令。两者用法相同，局部指令只能在当前组件里面使用。当全局指令和局部指令同名时以局部指令为准。1. 自定义指令中的钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind、inserted、update、componentUpdated和unbind。bind => 指令被绑定...
复制链接

扫一扫