跳至主要內容

vue2

ZJX2024年1月13日大约 2 分钟

简介

一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型

v2 参考文档

数据绑定

  • v-bind 和 v-modle

    v-bind 只能完成 js 数据到页面的单向绑定，而 v-modle 则是双向绑定；

    注意：v-modle 只能使用在表单元素上；其他元素如绑定样式只能用v-bind。

    <template>
  <div>
    <!-- v-bind -->
    <input type="text" v-bind:value="name" />
    <input type="text" :value="name" /><!-- 简写 -->

    <!-- v-modle -->
    <input type="text" v-modle:value="name" />
    <input type="text" v-modle="name" /><!-- 简写 -->
  </div>
</template>
<script>
export default {
  name: "Test",
  // 函数式写法
  data() {
    return {
      name: 18,
    };
  },
  // 对象式写法（不推荐，多组件中用此种方式会报错！）
  // data: {
  //   name: 18,
  // },
};
</script>

数据代理

以下是数据代理的简单示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>测试数据代理原理（通过 obj2 完成对 obj 的属性操作）</h1>
    <h1>通过代理修改 obj2 的 name，obj 的 name 同步更改</h1>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script type="text/javascript">
      let obj = { name: "张三" };
      let obj2 = { age: 18 };
      Object.defineProperty(obj2, "name", {
        get() {
          return obj.name;
        },
        set(value) {
          obj.name = value;
        },
      });
    </script>
  </body>
</html>

在控制台中输入 obj2.name = "李四"，再输入 obj.name ，值为 "李四"，这样就实现了一个对象对另一个对象的控制。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>测试 Vue2 数据代理</h1>
    <div id="root">
      <p>姓名：{{ name }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#root",
        data() {
          return {
            name: "张三",
          };
        },
      });
    </script>
  </body>
</html>

同理，Vue2 数据代理其原理就是通过 Object.defineProperty() 来劫持 data 中的数据（代理对象为_data），当数据发生变化时，通知视图更新。

在控制台输入 vm._data.name = '李四'，观察页面也在同步变化。

最近更新：