Vue 模板語法

1.vue 和大多數后臺語言，甚至是和art-template 這種前端模板庫一樣，都有一套，特定的語法來把數據渲染在html上。

Mustache -- 大胡子語法

1.大胡子的語法格式雙大括號'{{}}',用在html標簽之間，不能寫在標簽屬性中

2.大胡子語法中可以使用js表達式，但只限于Vue實例作用域的和Vue沙盒白名單，白名單規定的一些全局變量例如Math和FDate。

3.表達式一些基本表達式，和一些三元運算例如：

'{{num + 1}}'、'{{status ? 'succeed' : 'failed'}}'

'{{changeTime()}}'、'{value.replace(/,/g,"")}'

4.但不支持流控制例如:'{{ if (ok) { return message } }}'

大胡子語法案例

Title

{{msg}}

var vm = new Vue({

el:"#app",

data:{

msg:"將會被大胡子語法渲染"

}

})

v-text -- 模板渲染

1.v-text 能展示對應data中數據內容，也能在數據基礎上做運算

2.v-text 會吧標,簽中的內容替換

v-text -- 使用案例

Title

我被覆蓋掉了

var vm = new Vue({

el:"#app",

data:{

msg:"將會被v-text渲染"

}

})

展示效果

image.png

v-html -- html標簽渲染

1.將標簽語義化展示在頁面上

2.容易產生xss攻擊，請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

3.如何防止xss攻擊:

3.1 前端過濾

3.2 后臺轉義(< > < >)

3.3 給cookie 加上屬性 http例如:

click

v-html 案例

Title

var vm = new Vue({

el:"#app",

data:{

msg:"v-html渲染"

}

})

三種將數據渲染到頁面的方法總結

1.雖然上面三種方法都可以將數據渲染到頁面上，但是工作中我最常用的是'{{}}'

2.'{{}}' 最被常用但是在加載的時候會出現閃爍問題(指令篇章v-cloak會講解解決方法)，無法將html格式數據渲染，只能當字符串展示

3.'v-text' 雖然沒有數據加載閃爍問題，但是會將標簽中間的數據覆蓋，也不能渲染html格式數據。

4.'v-html' 謹慎使用會出現xss攻擊的風險

總結

以上是生活随笔為你收集整理的用vue语法写html,Vue -- 模板语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。