Vue 模板语法 - 技术栈

以下是一段 HTML 片段，它展现了56个民族。

html 复制代码

<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 将爆炸。

如何解决这种重复代码问题呢？前辈们发明了模板引擎。比如下面的代码：

Mustache 复制代码

<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 表达式

这里可能就是要注意一下"调用函数"中的副作用与"受限的全局访问"中的有限的全局对象列表了。

在编程中，副作用是指函数或表达式对除了返回值以外的其他部分产生的影响。这些影响可能包括修改全局变量、改变对象的状态、打印输出、读取输入等。

js 复制代码

function add(a, b) {
  return a + b;
}

上面的这个函数就是一个无副作用的函数。

js 复制代码

function add(a, b) {
  // 在这里我们调用了后台接口，向数据库保存了数据，这就是有副作用。
  fetch("https://example.com/profile", {
    method: "POST", 
    body: JSON.stringify(data),
  })
  return a + b;
}

有限的全局对象列表，这个官方举例了，直接点进去看就可以了。

指令 Directives

官方说得太好了，有问题评论区见吧。