Vue 模板語法
1.vue 和大多數(shù)后臺語言，甚至是和art-template 這種前端模板庫一樣，都有一套，特定的語法來把數(shù)據(jù)渲染在html上。
Mustache -- 大胡子語法
1.大胡子的語法格式雙大括號'{{}}',用在html標簽之間，不能寫在標簽屬性中
2.大胡子語法中可以使用js表達式，但只限于Vue實例作用域的和Vue沙盒白名單，白名單規(guī)定的一些全局變量例如Math和FDate。
3.表達式一些基本表達式，和一些三元運算例如：
'{{num + 1}}'、'{{status ? 'succeed' : 'failed'}}'
'{{changeTime()}}'、'{value.replace(/,/g,"")}'
4.但不支持流控制例如:'{{ if (ok) { return message } }}'
大胡子語法案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!--錯誤示范，大胡子語法不能用在標簽的屬性中-->
<!--<a href="{{msg}}">錯誤示范</a>-->
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"將會被大胡子語法渲染"
}
})
</script>
</body>
</html>
v-text -- 模板渲染
1.v-text 能展示對應data中數(shù)據(jù)內容，也能在數(shù)據(jù)基礎上做運算
2.v-text 會吧標,簽中的內容替換
v-text -- 使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="msg"></p>
<!--元素中間的內容不展示-->
<p v-text="msg">我被覆蓋掉了</p>
<!--可以進行簡單的計算-->
<p v-text="msg+1"></p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"將會被v-text渲染"
}
})
</script>
</body>
</html>
-
展示效果
image.png
v-html -- html標簽渲染
1.將標簽語義化展示在頁面上
2.容易產生xss攻擊，請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。
3.如何防止xss攻擊:
3.1 前端過濾
3.2 后臺轉義(< > < >)
3.3 給cookie 加上屬性 http例如:
<a href=javascript:location.+document.cookie>click</a>
v-html 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-html="msg"></p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"<span style='color:red'>v-html渲染</span>"
}
})
</script>
</body>
</html>
三種將數(shù)據(jù)渲染到頁面的方法總結
1.雖然上面三種方法都可以將數(shù)據(jù)渲染到頁面上，但是工作中我最常用的是'{{}}'
2.'{{}}' 最被常用但是在加載的時候會出現(xiàn)閃爍問題(指令篇章v-cloak會講解解決方法)，無法將html格式數(shù)據(jù)渲染，只能當字符串展示
3.'v-text' 雖然沒有數(shù)據(jù)加載閃爍問題，但是會將標簽中間的數(shù)據(jù)覆蓋，也不能渲染html格式數(shù)據(jù)。
4.'v-html' 謹慎使用會出現(xiàn)xss攻擊的風險
