1. 内置指令
- v-bind和v-model
- v-if和v-show
- v-for
- v-on
v-text
- 作用:向其所在的节点中渲染文本内容。
- 与插值语法的区别:
v-text
会替换掉节点中的内容,{{xx}}
则不会。
<div id="root">
<div>你好,{{name}}</div>
<div v-text="name"></div>
</div>
v-html
(没有值)
- 作用:向指定节点中渲染包含
html结构
的内容。 - 与插值语法的区别:
v-html
会替换掉节点中所有的内容,{{xx}}
则不会。v-html
可以识别html结构
。
- 严重注意:v-html有
安全性问题
!!!!
- 在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
- 一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
v-once
(没有值)
v-once
所在节点在初次动态渲染后,就视为静态内容了。- 以后数据的改变不会引起
v-once
所在结构的更新,可以用于优化性能。
v-pre
- 跳过其所在节点的编译过程。
- 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
v-cloak
(没有值)
- 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉
v-cloak
属性。 - 使用
css
配合v-cloak
可以解决网速慢时页面展示出{{xxx}}
的问题。
2. 自定义指令
2.1 定义
new Vue({
directives:{指令名:配置对象}
})
new Vue({
directives{指令名:回调函数}
})
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
Vue.directive(指令名,配置对象)
Vue.directive(指令名,回调函数)
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
- 备注:
- 指令定义时不加
v-
,但使用时要加v-
- 指令名如果是多个单词,要使用
kebab-case
命名方式,不要用camelCase
命名
2.2 回调函数与配置对象
- 回调函数中有两个参数
el
, binding
,分别表示使用指令的DOM元素和绑定信息,如value值。 - 配置对象中常用三个回调:
bind
:指令与元素成功绑定时调用。inserted
:指令所在元素被插入页面时调用。update
:指令所在模板结构被重新解析时调用。
- 使用回调函数方式配置的指令,相当于配置了
bind
和update
。