【Vue3 基础篇】03.模板语法
创始人
2025-05-30 08:41:02
0次

上章说到，在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。还有很多其它的指令语法没有讲到，那么就在这一章节，我们通过实战一个个看怎么用吧。

了解指令

指令是由 v- 开头的一种特殊 attribute。Vue 使用的是在基本 HTML 上增加指令的模板语言，这样能让我们能声明式的进行数据绑定和 DOM 操作。

在表现上，我们似乎就是在写 HTML ，只不过在赋值、监听时间等等方面，Vue 给我们提供了指令，这样我们可以通过指令的方式，声明式的控制 HTML 。

Attribute 绑定 v-bind

双大括号可以进行动态的文本插值，那如果我想让 HTML 的属性（attribute）也能动态赋值该怎么办呢？

响应式地对 HTML 绑定一个 attribute，我们可以使用 v-bind 指令：


// 简写

这里: 后的 id，将于 userId 保持一致

由于 v-bind 使用频繁，所以提供了简写方式 :。开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它在 Vue 中是合法的，最终 Vue 也会将它编译成合法的 HTML，也就是说，在真实的 DOM 中是没有 v-bind 指令的。

简写语法虽说是可选的，但在实际开发中是最常见的用法，后续的实战也将使用简写语法。

实战 试着把一个动态的 class 绑定添加到这个

上，让 div 中的文字变为红色。

冒号后面的部分 (:class) 是指令的“参数”。此处 div 元素的 class attribute 将与后面的表达式保持同步。

简单的判断表达式的方法是：看它是否可以合法地写在 return 后面。

事件监听 v-on

如果要实现监听 DOM 事件，需要使用 v-on 指令，它也有简写为 @，如示例监听点击事件：


// 简写

实战 尝试自行实现 increment 函数，通过使用 v-on 将其绑定到按钮上，并显示点击后的 count 数。

通过 @click 监听了点击事件触发 increment 函数，在函数中我们通过修改 ref 来更新组件状态。简写的版本我们可以看做是执行 () => count++，简版的 count 是在模板中能直接获取到值而不用通过 .value，对于这种简单的只执行一句 count++ 的方法，我们可以用这种简写。

表单绑定 v-model

在表单中我们可以通过使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定：

这段代码实现了在文本框里输入，在

里的文本也随着你的输入更新了，这是一个双向绑定的过程。

由于表单绑定（双向绑定）的场景很多，为了简化操作，Vue 提供了 v-model （没有简写）指令，它实际上是上述操作的语法糖，于是我们可以简化上述代码：

v-model 会将被绑定的值与 的 value 值自动同步，这样就不必再使用 v-on 处理 value 同步的函数了。

v-model 支持文本输入框、多选框、单选框、下拉框等多种输入类型。

条件渲染 v-if/v-show

当我们想有条件的渲染元素时，可以使用 v-if 或者 v-show指令，v-if 可以搭配使用 v-else 和 v-else-if 来表示其他的条件分支：

当 show 为 true 时展示!


当 show 为 false 时展示!


当 show 为 true 时展示!

下面我们实战一下，模板中包含两个 h1 和一个按钮，尝试给它们添加 v-if 和 v-else 指令，实现点击按钮切换不同 h1。

需要注意的是，这种方式虽然能实现上述效果，但是由于 v-if 是“真实的”按条件渲染，因此在切换为 false 时，条件区块内的事件监听器和子组件都会被销毁与重建。

使用 v-show 指令实现上述效果：

相对于 v-if 的不同之处在于 v-show 会在 DOM 渲染中保留该元素。v-show 仅切换了该元素上名为 display 的 CSS 属性，让它不可见。

v-show 不支持在