Vuejs数据绑定和数据代理二

最新推荐文章于 2024-04-26 16:18:28 发布

米白蓝

最新推荐文章于 2024-04-26 16:18:28 发布

阅读量488

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124060834

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<body>
  <div class="box">
    <span>单项数据绑定</span>
    <input type="text" :value="value1">
    <br>
    <span>双项数据绑定</span>
    <!-- <input type="text" v-model:value="value2"> -->
    <input type="text" v-model="value2">
    <h1>测试一:{{$options}}</h1>
  </div>
  <script>
    const vm = new Vue({
      // el:'.box',
      // data: {
      //   value1: '页面改变不能改变的数据',
      //   value2: '双向绑定'
      // }
      data: function () {
        console.log('data中的打印this', this);
        return {
          value1: '页面改变不能改变的数据',
          value2: '双向绑定'
        }
      }
    })
    console.log(vm);
    vm.$mount('.box')
  </script>
</body>

数据绑定

v-bind:单向数据绑定，data数据改变，页面中的也会改变，但页面中数据改变，data中数据不会改变；
v-model:双向数据绑定，改变一方，另一方也会跟着改变，但是只能应用于表单类元素中（有value值的输入类元素）；简写:v-model:value=“xxx” === v-model=“xxx”;
使用一个变量接受实例对象，打印出来的属性方法用 $KaTeX parse error: Expected group after '_' at position 21: \dots们可以使用到的；Vue实例的 _̲_ proto __隐式原型以$ 开头的属性方法也是我们可以用的； vue所管理的函数，不能写成箭头函数，不然this就不是只想Vue；
el的第二种写法：接受Vue实例的变量.$mount(‘选择器’)，这种写法更灵活；
data的第二种写法：函数式，data:function(){return{}},使用组件时必须使用函数式；写的时候可以简写data(){return{}}；
MVVM模型：M：模型mode：对应data中的数据：页面DOM（Vue的模板，引用的容器）l；V:视图View；VM：视图模型ViewModel；Vue实例对象；因此经常会用VM代表Vue实例去接受它；
出现在Vue实例上面的属性、方法都可以直接在vue模板中使用中、出现在原型上面的也是可以直接使用的；

<body>
  <div class="box">
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
  </div>
  <script>
    let number = 23
    let person = {
      name: 'zhangsan',
      sex: 'nan',
      // age: 18
    }
    Object.defineProperty(person, 'age', {
      // value: 18,
      // enumerable: true,
      // writable: true,
      // configurable: true,
      get: function () {
        return number
      },
      set(value) {
        number = value
        console.log('被修改的值为', value);
      }
    })
    console.log(person);
    // 把所有对象的属性名遍历存到一个数组中
    console.log(Object.keys(person));

    var obj1 = {
      x: 100
    }
    var obj2 = {
      y: 900
    }
    Object.defineProperty(obj2, 'x', {
      get() {
        return obj1.x
      },
      set(value) {
        obj1.x = value
      }
    })
    const data = {
      name: '张三',
      age: 19
    }
    const vm = new Vue({
      el: '.box',
      data
    })
  </script>
</body>

数据代理：

数据代理是什么：通过一个对象代理对另一个对象中属性的操作（读写）；
Object.defineproperty(需要添加的对象， ‘添加属性的名’，配置项{value：定义的值，enumerable:true(给一个对象添加属性或者定义属性的方法；添加的不参与遍历（枚举）设置参与枚举，默认false)，writable:true,(控制属性是否可以被修改，默认false),configurable: true(控制属性是否可以被删除，默认false),get: function() {retuen 添加属性的值(高级配置项，当读取添加的对象时，该函数就会被调用，且返回的值就是需要添加属性的值), set(value) {(高级配置项，当修改添加的对象时，该函数就会被调用，且会收到修改的具体的值} )；
vue中的数据代理：vm将data数据拿到之后，将data叫做_data存在了vm中；数据代理把data中的数据放在vm中一份，这样就使编码更方便，可以直接在{{}}中直接写data中的属性；通过vm对象来代理data中的属性操作；使用Object.defineproperty属性将data中的属性添加到vm中，并且指定setter和getter在内部操作（读写）data中对应的属性；
在data中的属性也可以看到getter和setter的样式，这里做的不是数据代理，而是做了一个数据劫持；因为要实现响应式；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs数据绑定和数据代理二

<body> <div class="box"> <span>单项数据绑定</span> <input type="text" :value="value1"> <br> <span>双项数据绑定</span>  <input ty
复制链接

扫一扫