vue中v-model

最新推荐文章于 2023-07-06 18:15:14 发布

孙景荣

最新推荐文章于 2023-07-06 18:15:14 发布

阅读量198

点赞数 1

分类专栏： vue2 文章标签： vue.js javascript 前端 html css

本文链接：https://blog.csdn.net/ssjjrr/article/details/127189230

版权

vue2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、双向数据绑定

v-model可以实现数据的双向绑定，data中的数据可以渲染到页面，通过页面也可以修改数据

<!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>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p>
        <input type="text" placeholder="请输入内容" v-model="msg" />
        <p>{{msg}}</p>
      </p>
    </div>
  </body>
</html>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      msg: '',
    },
  });
</script>

二、双向数据绑定原理

1、原理描述：当把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，使用Object.defineProperty 把这些属性全部转为getter/setter(数据劫持/数据映射)。在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

2、代码模拟

<!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>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p>
        <span></span>
        <input type="text" oninput="changeFn(this.value)" />
      </p>
    </div>
  </body>
</html>
<script>
  let data = {
    name: "张三",
  };

  document.querySelector("span").innerHTML = data.name;
  document.querySelector("input").value = data.name;

  function changeFn(val) {
    console.log(val);
    data.name = val;
  }

  Object.defineProperty(data, "name", {
    get() {
      return data.name;
    },
    set(val) {
      document.querySelector("span").innerHTML = val;
    },
  });
</script>