526互联

[Vue] vue学习笔记 (7): vue内置指令和自定义指令

发布时间 2023-12-04 20:47:30作者: Akira300000

内置指令

v-bind

单向绑定解析表达式，简写为:xxx

v-model

双向数据绑定

v-for

遍历数组/对象/字符串

v-on

绑定事件监听，简写为@xxx

v-if

条件渲染，动态控制节点元素是否存在

v-else

条件渲染，动态控制节点元素是否存在，与v-if一起用

v-show

动态控制节点是否显示

v-text

向所在的节点中渲染文本内容，会替换掉节点中的内容(而插值语法则不会)

v-html

作用是在指定的节点中渲染包含html结构的内容。和v-text一样，会替换掉节点内的内容，但是可以识别html标签 ⚠️v-html具有不安全性，一定要在可信的内容上使用v-html，以及永远不在用户提交的内容里使用，避免xss攻击

v-cloak

一个特殊的属性，没有赋值，vue实例创建完毕并接管容器后就会消失。可以使用css配合v-cloak来解决网速慢导致的网页展示不全的问题

v-once

v-once所在节点在初次渲染后，就视为静态内容了；之后的动态渲染不会引起v-once所在的结构更新，可用于优化性能

v-pre

v-pre所在的节点不会被vue解析，编译过程会被跳过，可用于优化性能

自定义指令

vue示例中的directives属性，有两种方式--函数式和对象式

函数式

创建一个指令v-big，使值扩大10倍
☀️big函数会在(1)初始化渲染时；(2)vue模板发生任何变化时被调用

<span v-big="n"></span>

directives: {
	// 函数式的官方指定参数，element是指令所在的节点，binding是一个包含对应表达式及其值的对象
	big(element, binding){
		element.innerText = binding.value * 10
	}
}
对象式

☀️指令会绑定3个函数 - bind，inserted，updated，分别代表元素渲染过程的3个时间点
☀️实际上，bind和updated函数很多情况下内容是一样的，就是完成该节点最基础的功能，或者说就是加上inserted功能的函数式表达(该表达中，函数会在初始化/模板更新时调用，即bind/updated被调用的时间)

<span v-bind="n"></span>
<input v-fbind="n"/>

directives: {
	fBind: {
		// 指令与元素成功绑定时（初始化时）
		bind(element, binding) {
			element.value = binding.value
		}
		// 元素被插入页面时
		inserted(element, binding) {
			element.focus()
		}
		// 指令所在的模板被更新并重新解析时
		updated(element, binding) {
			element.value = binding.value
		}
	}
}

全局指令

使用Vue.directive(指令名，回调函数) 或 Vue.directive(指令名，配置属性)定义一个全局指令，令vue实例内所有节点都可以与其绑定
像这样⬇️

Vue.directive('big', function(element, binding){
	element.innerText = binding.value * 10
})

// or...

Vue.directive('fbind', {
	bind(element, binding) {
		element.value = binding.value
	}
	inserted(element, binding) {
		element.focus()
	}
	updated(element, binding) {
		element.value = binding.value
	}
})

一个tip

??指令中写的那些函数，他们的this是指向window的，不是vue实体