以下是一段 HTML 片段，它展现了56个民族。
<ul>
<li>蒙古族</li>
<li>回族</li>
<li>藏族</li>
<li>维吾尔族</li>
<li>苗族</li>
<li>彝族</li>
<li>壮族</li>
<li>布依族</li>
<li>朝鲜族</li>
<li>满族</li>
...
发现有什么缺点吗？
是不是有点啰嗦？56 个民族就需要写56行 <li>，如果页面复杂的话，整个页面的 HTML 将爆炸。
如何解决这种重复代码问题呢？前辈们发明了模板引擎。比如下面的代码：
<ul>
{{#nationalities}}
<li>{{.}}</li>
{{/nationalities}}
</ul>
nationalities 在这里是一个数组，数组的内容就是56个民族，{{#nationalities}} 与 {{/nationalities}}会把其中的内容渲染 56 遍（因为 nationalities 有56个元素）。{{.}}表示输出每次循环的内容。
模板引擎(你可以把引入的 js 库看作是它)可以把这个简单的片段编译成与我们上面相同的 html 代码。是不是简洁很多了。
Vue 不但实现了上述模板引擎的所有功能，而且还提供了更加强大、友好的其它功能。这些正是我们本节要学习的内容。
文本插值
这个很好理解，就是 {{ msg }} 会被替换成我们 <script> 标签中 msg 的内容。当我们通过代码修改了 msg 的内容时，对应的页面内容也相应更新。
原始 HTML
这里一定要记住，v-html 指令比较危险，如果内容来自用户输入。比如用户通过输入框把内容存储到数据库中，而我们要展现的内容正是从数据库中获取到的用户输入的内容，那就很危险了。请看示例：play.vuejs.org/#eNp9UkFLwz…
这时候，请考虑使用一些第三方的防 XSS 库。
Attribute 绑定
这里没啥难理解的。
同名简写这个要注意 Vue 的版本，低版本不支持；
布尔型 Attribute 的这里，要记住几个固定的假值：false, 0, -0, 0n, “”, null, undefined, NaN, doucment.all(这个是历史遗留问题，很少很少使用)。
动态绑定多个值，一些自定义组件中会使用，坏处就是有可能你不知道这个对象中到底有多少属性。比如该对象来自于后台接口返回的数据。
使用 JavaScript 表达式
这里可能就是要注意一下“调用函数”中的副作用与“受限的全局访问”中的有限的全局对象列表了。
在编程中，副作用是指函数或表达式对除了返回值以外的其他部分产生的影响。这些影响可能包括修改全局变量、改变对象的状态、打印输出、读取输入等。
function add(a, b) {
return a + b;
}
上面的这个函数就是一个无副作用的函数。
function add(a, b) {
// 在这里我们调用了后台接口，向数据库保存了数据，这就是有副作用。
fetch("https://example.com/profile", {
method: "POST",
body: JSON.stringify(data),
})
return a + b;
}
有限的全局对象列表，这个官方举例了，直接点进去看就可以了。
指令 Directives
官方说得太好了，有问题评论区见吧。
原文链接：https://juejin.cn/post/7344259131715026979 作者：zhangwei
