为了让大家上手组合式API更轻松，我们对比选项式API来写，最终实现不同的编码风格完成相同的功能

选项式API

组合式API

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。

Vue3的响应式时使用proxy来实现的，接下来看取值和赋值操作

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

使用 JavaScript 表达式

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为 class 是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

数据绑定的一个常见需求场景是操纵元素的 CSS style列表，因为 style 是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

绑定对象

绑定数组

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。

在 Vue 中，提供了条件渲染，这类似于JavaScript 中的条件语句

v-if

• v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染
• v-else-if 提供的是相应于 v-if 的else if 区块。它可以连续多次重复使用
• v-else 为 v-if 添加一个else 区块

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名

大多数情况，我们渲染的数据源来源于网络请求，也就是 JSON 格式，要么数组，要么对象。

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript 代码。用法：v-on:click="methodName" 或 @click="methodName"

事件处理器