本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
1 模板语法
在前面其实我们已经用过很多次模板语法了，大家熟悉的插值表达式 {{}} 就是其中之一，接下来我们再重新系统学习一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 的模板语法</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{name}} <!-- 模板语法1️⃣：插值表达式，以两个花括号包裹； -->
<!-- ❗️注意：一个以 v- 开头的指令，它后面双引号中的值是指一个 JS 表达式，而不再是字符串！ -->
<div v-text="name"></div> <!-- 模板语法2️⃣：v-text 指令的意思是让它
所在 div 的 innerText 变为 data 中 name 数据的内容； -->
<div v-html="name"></div> <!-- 模板语法3️⃣：v-html 指令的意思是让它
所在 div 的 innerHTML 的内容和 data 中的 name 绑定。 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'qdywxs'
}
})
</script>
</body>
</html>
我们保存后可以在网页上看到三个“qdywxs”：
❓它们看起来一样，但真的一样吗？
答： v-text 实际上和插值表达式的功能是一样的，也是一个模板语法，可以把数据变量显示在页面上**。**而 **v-html **会对内容不做任何解析，直接输出。
<script>
var vm = new Vue({
el: '#app',
data: {
name: '<h1>qdywxs</h1>' // ❗️我们把“qdywxs”外加一个 h1 标签！
}
})
</script>
这样更改后，我们可以看到使用插值表达式和 v-text 指令的都对 <h1> 标签进行了转义，然后再输出内容；而使用 v-html 指令的输出了一个带有 <h1> 样式的 qdywxs ：
其实除了这三个模板语法，Vue 之中还有很多其他的可以绑定在模板上的语法。
比如我们之前用到的的 v-bind:content="item" 、 v-on:click="handleClick" 等，都属于 Vue 的模板语法。
2 模板语法与 JS 表达式
在前面我们说到：一个以 v- 开头的指令，它后面双引号中的值是指一个 JS 表达式。
既然它是 JS 表达式，那么我们就可以给 name 再加上一个字符串。因为它们从整体来看，也是一个 JS 表达式。
<div id="app">
{{name}}
<div v-text="'hello ' + name"></div> <!-- 1️⃣添加“hello ”字符串； -->
<div v-html="'hi ' + name"></div> <!-- 2️⃣添加“hi ”字符串。 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'qdywxs'
}
})
</script>
我们可以看到， v-text 和 v-html 指令中写上 JS 表达式时没有问题。
❓插值表达式中可以写 JS 表达式吗？
我们给插值表达式中也添加一个字符串：
<div id="app">
{{'Oli ' + name}} <!-- ❗️添加“Oli ”字符串； -->
<div v-text="'hello ' + name"></div>
<div v-html="'hi ' + name"></div>
</div>
保存刷新页面后可以看到，插值表达式也是可以写 JS 表达式的：
🏆总结：插值表达式、 v-text 、 v-html 这三种语法的内容之中除了变量，都可以写 JS 表达式。
祝好，qdywxs ♥ you！
