前端面试题：vue内置指令和自定义指令

Shirley~~

于 2023-06-20 22:02:23 发布

阅读量318

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_45866961/article/details/131316154

版权

Vue指令是HTML元素上的特殊属性，如v-text、v-model等，用于添加数据驱动行为。文章介绍了Vue的内置指令，包括v-text、v-html等，并详细阐述了如何创建自定义指令，包括全局和局部定义的方式，以增强Vue应用的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue指令是带有v-前缀的特殊属性，他们作用于HTML元素，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。
vue的内置指令有：
v-text；v-html；v-model；v-on ；v-bind；v-show；v-if；v-for
自定义指令：是一种有效的补充和扩展数据驱动的方法，用来操作dom。
自定义指令的定义方法：有局部定义和全局定义
全局定义：

// 注册一个全局自定义指令 `v-upper`
//参数：1.指定名称（不包含v-,只能是小写）
//2.回调函数（参数1 使用指令的那个节点，参数2这个指令使用的表达式的值）
Vue.directive('upper',function(node,bindings){
	node.textContent = bindings.value.toUpperCase()
})
new Vue({
	el:'#app'
})

局部定义：

new Vue({
	el:'#app',
	directives: {
		upper(node,bindings){
			node.textContent = bindings.value.toUpperCase()
		}
	}
})