在本章节中，我们将深入探讨 Vue3 中的模板语法。模板语法是 Vue 的核心特性之一，它允许我们使用简洁的模板来构建用户界面。通过这一章的学习，你将掌握如何在 Vue 组件中使用插值、指令、计算属性以及条件和列表渲染等重要概念。
插值
文本插值
文本插值是最基础也是最常见的用法。它允许你在 HTML 中直接插入 Vue 实例的数据。文本插值使用双大括号 {{ }} 来包围变量名。
<div id="app">
{{ message }}
</div>在 JavaScript 部分，我们需要定义一个名为 message 的数据属性：
-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
-------- ------- ------
-
-
---
------------------HTML 插值
默认情况下，Vue 会自动对插入到 HTML 中的内容进行转义，以防止 XSS 攻击。如果你需要插入原始的 HTML 内容，可以使用 v-html 指令。
<div id="app">
<p>使用双大括号：{{ rawHtml }}</p>
<p>使用 v-html： <span v-html="rawHtml"></span></p>
</div>在 JavaScript 中：
-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
-------- ---------------------- -------------------------
-
-
---
------------------请注意，v-html 不推荐用于展示用户输入的内容，因为它可能带来安全风险。
指令
v-if / v-else / v-else-if
v-if 是条件渲染的基础。它根据表达式的真假值来决定是否渲染元素。当条件变化时，DOM 结构也会相应地更新。
<div id="app">
<p v-if="seen">现在可以看到我</p>
</div>-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
----- ----
-
-
---
------------------v-else 和 v-else-if 可以用来处理其他情况：
<div id="app">
<p v-if="type === 'A'">A</p>
<p v-else-if="type === 'B'">B</p>
<p v-else>C 或其他</p>
</div>v-show
与 v-if 类似，v-show 也用于条件渲染。但是，v-show 总是渲染元素，并且只通过 CSS 的 display 属性来控制显示或隐藏。
<div id="app">
<p v-show="ok">这个段落将会被显示或隐藏</p>
</div>v-for
v-for 用于循环渲染列表。它可以遍历数组或对象。
数组遍历
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.message }}
</li>
</ul>
</div>-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
------ -
- -------- ------- --
- -------- -------- --
- -------- -------- -
-
-
-
---
------------------对象遍历
<div id="app">
<ul>
<li v-for="(value, key, index) in object" :key="index">
{{ key }}: {{ value }}
</li>
</ul>
</div>-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
------- -
----- ----- -----
---- ---
---- -----------
-
-
-
---
------------------v-bind
v-bind 用于动态绑定 HTML 属性。它可以绑定到任何属性上，例如 class 和 style。
动态绑定 class
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
--------- ----
-
-
---
------------------动态绑定 style
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</div>-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
------------ ------
--------- --
-
-
---
------------------计算属性
计算属性允许我们声明式地定义一些依赖于其他数据属性的值。它们是基于它们的依赖关系缓存的，只有当依赖发生改变时才会重新计算。
<div id="app">
<p>原始字符串：{{ message }}</p>
<p>反转字符串：{{ reversedMessage }}</p>
</div>-- -------------------- ---- -------
----- --- - ---------------
------ -
------ -
-------- ------- ------
-
--
--------- -
----------------- -
------ ------------------------------------------
-
-
---
------------------计算属性非常适合用于处理那些需要依赖多个数据源或者需要执行复杂逻辑的情况。
方法
除了使用计算属性外，你还可以使用方法来处理数据。方法会在每次调用时重新计算结果，因此更适合用于那些不需要缓存的场景。
<div id="app">
<p>{{ greet('Vue') }}</p>
</div>-- -------------------- ---- -------
----- --- - ---------------
-------- -
----------- -
------ --------------
-
-
---
------------------以上便是 Vue3 中模板语法的一些基本用法。通过这些知识，你可以开始构建更复杂的用户界面了。下一章我们将继续深入学习 Vue3 的组件系统。