Vue的数据代理

最新推荐文章于 2024-08-14 18:44:30 发布

杀了小惠

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量383

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52633911/article/details/135511926

版权

本文介绍了Vue中的数据绑定机制，包括插值表达式、单向数据绑定（v-bind:src）与双向数据绑定（v-model），以及计算属性的使用。同时详细讲解了数据代理的概念，即如何通过vm对象操作组件data中的属性。

摘要由CSDN通过智能技术生成

数据绑定

在了解数据代理之前先了解什么是数据绑定

插值表达式

Vue使用双花括号{{}}来进行插值表达式的数据绑定。例如，我们可以将数据绑定到HTML模板中的元素上，实现数据的动态渲染。

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

单向数据绑定

v-bind: 数据只能从data到页面

当页面中的数据发生改变不会影响data中的数据

<div id="app">
  <img v-bind:src="imageSrc">
</div>

new Vue({
  el: '#app',
  data: {
    imageSrc: 'path/to/image.jpg'
  }
})

双向数据绑定

v-model= 数据不仅能从data到页面，也能从页面到data

页面中的数据改变后，data中的数据也会随之发生改变

<div id="app">
  <input v-model="message" type="text">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

计算属性

Vue提供了计算属性的功能，可以根据已有的数据计算出新的属性，并将其绑定到DOM元素上。

计算属性是由两个存在的属性创建出不存在的属性

<div id="app">
  <p>商品总价：{{ totalPrice }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    price: 10,
    quantity: 2
  },
  computed: {
    totalPrice: function() {
      return this.price * this.quantity;
    }
  }
})

如上商品总价totalPrice就是计算属性

什么是数据代理？

通过vm对象来代理data对象中属性的操作(读/写)

在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问组件中的数据时，实际上是访问了这个getter/setter，跟java中实体类的成员属性的调用有点相似，获取跟修改实际上是调用了get和set方法，更加方便的操作data中的数据。