Vue 模板語法

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

Mustache -- 大胡子語法

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

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

3.表達(dá)式一些基本表達(dá)式，和一些三元運(yùn)算例如：

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

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

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

大胡子語法案例

Title

{{msg}}

var vm = new Vue({

el:"#app",

data:{

msg:"將會(huì)被大胡子語法渲染"

}

})

v-text -- 模板渲染

1.v-text 能展示對(duì)應(yīng)data中數(shù)據(jù)內(nèi)容，也能在數(shù)據(jù)基礎(chǔ)上做運(yùn)算

2.v-text 會(huì)吧標(biāo),簽中的內(nèi)容替換

v-text -- 使用案例

Title

我被覆蓋掉了

var vm = new Vue({

el:"#app",

data:{

msg:"將會(huì)被v-text渲染"

}

})

展示效果

image.png

v-html -- html標(biāo)簽渲染

1.將標(biāo)簽語義化展示在頁面上

2.容易產(chǎn)生xss攻擊，請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值，絕不要對(duì)用戶提供的內(nèi)容使用插值。

3.如何防止xss攻擊:

3.1 前端過濾

3.2 后臺(tái)轉(zhuǎn)義(< > < >)

3.3 給cookie 加上屬性 http例如:

click

v-html 案例

Title

var vm = new Vue({

el:"#app",

data:{

msg:"v-html渲染"

}

})

三種將數(shù)據(jù)渲染到頁面的方法總結(jié)

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

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

3.'v-text' 雖然沒有數(shù)據(jù)加載閃爍問題，但是會(huì)將標(biāo)簽中間的數(shù)據(jù)覆蓋，也不能渲染html格式數(shù)據(jù)。

4.'v-html' 謹(jǐn)慎使用會(huì)出現(xiàn)xss攻擊的風(fēng)險(xiǎn)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。