[Vue] vue学习笔记 (7): vue内置指令和自定义指令
内置指令
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实体