-
熟悉的指令
名称 作用 v-bind : 单向绑定解析表达式,可简写为:xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on: 绑定事件监听,可简写为@ v-if: 条件渲染(动态控制节点是否存存在) v-else: 条件渲染(动态控制节点是否存存在) v-show : 条件渲染(动态控制节点是否展示) -
新学指令
名称 作用 v-text 把所有的字符串都当成正常的文本去解析,替换所在的结点的内容,而插值语法不会 v-html 支持HTML结构的解析;与插值语法的区别:v-html会替换掉结点中所有的内容,插值语法不会。
严重注意:!!!v-html有安全性问题
(1)在网站上动态渲染任意的HTML是非常危险的行为,容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html,永远不要在用户提交的内容上使用!!!v-cloak v-clock指令(没有值):
1.本质就是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-clock属性。
2.使用css的属性选择器:[v-cloak]{display:none}配合v-clock可以解决网速慢时,Vue还没接管容器时的{{XXX}}问题。v-once v-once在结点初次动态渲染自后,就视为静态内容了,有数据的改变不会引起v-once所在结点的更新,用于优化性能; v-pre 作用是跳过所在结点的编译。因此,可以利用他跳过没有使用指令语法、没有使用插值语法的结点,会加快编译; -
自定义指令
fbind: {
// 指令与元素成功绑定时调用
bind(element, binding) {
element.value = binding.value;
},
// 指令所在的结点被插入页面时
inserted(element, binding) {
element.focus();
},
// 指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
}
}
1.指令定义时
不加v-,但使用时
要加v-;
2.指令名如果是多个单词,要使用kebab-case
命名方式,不要用camelCas
e命名。