数据的双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!-- 这是使用 Vue 实现的 demo -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <!-- 通过 `{{ 变量名 }}` 语法渲染响应式变量 -->
      <p>Hello {{ name }}!</p>

      <!-- 通过 `v-model` 双向绑定响应式变量 -->
      <!-- 通过 `@input` 给输入框绑定输入事件 -->
      <input
        type="text"
        v-model="name"
        placeholder="输入名称打招呼"
        @input="printLog"
      />

      <!-- 通过 `@click` 给按钮绑定点击事件 -->
      <button @click="reset">重置</button>
    </div>

    <script>
      const { createApp, ref } = Vue
      createApp({
        // `setup` 是一个生命周期钩子
        setup() {
          // 默认值
          const DEFAULT_NAME = 'World'

          // 用于双向绑定的响应式变量
          const name = ref(DEFAULT_NAME)

          // 打印响应式变量的值到控制台
          function printLog() {
            // `ref` 变量需要通过 `.value` 操作值
            console.log(name.value)
          }

          // 重置响应式变量为默认值
          function reset() {
            name.value = DEFAULT_NAME
            printLog()
          }

          // 需要 `return` 出去才可以被模板使用
          return { name, printLog, reset }
        },
      }).mount('#app')
    </script>
  </body>
</html>

这里设置双向数据绑定vmodel=”name”给这里p标签中的name元素与input元素进行了双向绑定
这样不需要频繁刷新DOM来显示修改，原理是通过虚拟dom找出需要更新的节点，只对dom中对应节点进行修改，节约了刷新dom带来的大量性能浪费