Vue3.x 全家桶 | 03 - Vue 的动态绑定

一、Vue 的动态绑定特性

在上一篇文章中我们讲到了 Vue 的基本语法的初识，通过 v-for 了解到了 Vue 框架的强大的指令系统，除此之外 Vue 还有一个非常重要的特性 - 响应式数据绑定；Vue 使用双向数据绑定，当数据发生变化时，视图会自动更新，反之当视图发生变化时，数据也会更新，双向绑定。

接下来我们会通过一个经典的计数器案例来体现 Vue 的响应式数据绑定特性。

Vue 的响应式

创建一个 HTML 页面，引入本地的 vue.js 文件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../lib/vue.js"></script>
</body>
</html>

接着我们需要调用 Vue 对象的 createApp 方法，并传入一个对象，在该对象中我们需要使用 template 属性来构建 HTML 结构，使用 data 属性来设置 HTML 结构中的变量，并给定默认值为 0，具体代码如下：

js 复制代码

const app = Vue.createApp({
  template: `
    <h2>计数器 {{counter}}</h2>
  `,
  data: function(){
    return {
      counter: 0
    }
  }
})

app.mount('#app')

使用 LiverServer 打开页面，效果如下：

接着我们需要在 Vue 对象的 template 属性中增加 HTML 元素 - 两个按钮，分别对定义在 data 中的变量进行加和减的操作：

js 复制代码

const app = Vue.createApp({
  template: `
    <h2>计数器 {{counter}}</h2>
    <button>+1</button>
    <button>-1</button>
  `,
  data: function(){
    return {
      counter: 0
    }
  }
})

app.mount('#app')

我们需要通过这两个按钮的点击来改变变量的值，因此我们可以在这两个 button 上绑定事件，绑定事件我们需要使用到 Vue 的 v-on 指令，并且绑定事件的具体的操作需要定义在 Vue 对象的 methods 属性中：

js 复制代码

const app = Vue.createApp({
  template: `
    <h2>计数器 {{counter}}</h2>
    <button v-on:click="increment">+1</button>
    <button v-on:click="decrement">-1</button>
  `,
  data: function(){
    return {
      counter: 0
    }
  },
  methods: {
    increment: function(){
      this.counter++
    },
    decrement: function(){
      this.counter--
    }
  },
})

app.mount('#app')

methods是 Vue 对象的属性之一，用于定义包含多个方法的对象。这些方法可以在 Vue 对爱你给中被调用，用于处理事件、处理业务逻辑，或执行其他操作。methods 对象中的每个属性都是一个函数，它们可以包含任意的 JavaScript 代码。

上面代码中通过 this.counter 来操作 counter 的值，这里的 this 是一个特殊的人关键字，它指代当前执行的上下文中的对象，其值的具体取决于函数是如何被调用的，在 Vue 中 this 通常执行 Vue 对象或者实例，通过 this 使得在方法内部可以访问和修改 Vue 对象的数据以及其他的方法。

如果在普通的 JavaScript 函数中使用 this，其值可能会受到调用方式的影响，可能指向不同的对象或是 undefined。

使用 LiverServer 打开 HTML 页面，并点击按钮来操作 counter:

上述代码中就实现了 Vue 的响应式特性，通过点击事件操作 counter 可以响应式的渲染在 HTML 页面上。

Vue 的动态绑定

要实现双向动态绑定还需要 Vue 一个非常重要的指令 v-model，我们可以通过 v-model 绑定 counter 并在页面上操作它，看能否响应式的显示在页面上。

在上述代码中 Vue 对象的 template 属性中增加一个 input 元素，在该元素的属性中使用 v-model 绑定 counter：

js 复制代码

const app = Vue.createApp({
  template: `
    <h2>计数器 {{counter}}</h2>
    <input v-model="counter" placeholder="修改 counter 的值">
    <button v-on:click="increment">+1</button>
    <button v-on:click="decrement">-1</button>
  `,
  data: function(){
    return {
      counter: 0
    }
  },
  methods: {
    increment: function(){
      this.counter++
    },
    decrement: function(){
      this.counter--
    }
  },
})

app.mount('#app')

刷新 HTML 页面，在输入框和按钮操作 counter 的值：

Vue 中的 响应式数据绑定 是框架的一项核心特性，通过这个特性，Vue实现了数据和视图之间的自动同步。当数据发生变化时，相关的视图会自动更新：

数据定义： 在 Vue 实例的 data 选项中定义数据。这些数据称为响应式数据，即当数据发生变化时，相关的视图会自动更新。
模板绑定： 在 HTML 模板中使用插值表达式或其他指令将数据与视图关联起来。
观察变化： Vue 内部使用了"响应式依赖追踪"的机制，当模板中使用的响应式数据发生变化时，Vue能够追踪到这些变化。
通知更新： 当数据发生变化时，Vue 会通知相关的视图进行更新。这一步通过使用虚拟 DOM 来提高性能。