Vue中学习笔记-数据代理

文章目录


前文提要

本人仅做个人学习记录,如有错误,请多包涵


数据代理的概念

使用一个对象代理对另一个对象中属性的操作。

MVVM模型和Vue中的数据代理

Vue框架是建立在MVVM的基础上开发的。

MVVM框架模型了解:什么是MVVM框架?

第一个M代表Model ,模型,也就是数据

第一个V代表View ,视图,也就是呈现出来的效果

最后的VM代表ViewModel,是视图模型,是抽离出来的部分逻辑代码,用于构建视图和模型之间的关联,能够借此管理两部分。

M,模型

Vue中的Model也就是Vue实例中的data中的数据,也就是下文data后大括号中的内容

js 复制代码
const vm = new Vue({
      // el: '#box',
      data: {
        name: "这里是name的值",
      }
})

V,视图

Vue中的View视图,则是html中嵌入了Vue框架特殊语法待处理的模版代码,

html 复制代码
<div class="box" id="box">
    <h1>
      hello,world{{name}}
    </h1>
  </div>

例如这里的,div标签,就是我理解中的Vue里的视图,

VM,视图模型

至于VM,视图模型,则是整个Vue实例。

通过这种关系,也就是通过这种数据代理的方法,将html中的数据和Vue实例中的data数据关联起来。

在第一个M中的代码用vm指向整个Vue实例,代码中的data会在vm上生成一个属性_data,_data不是Vue实例中的data,但是实例中的data的数据,_data中都有。

接着就是一串代码

html 复制代码
<div class="box" id="box">
    <h1>
      hello,world{{name}}
    </h1>
  </div>

在这两层大括号中,我们可以直接写js表达式也可以写出Vue实例中含有的各类属性

那么Vue实例中有name吗,按照上面的讲述,是不是应该写成

html 复制代码
hello,world{{_data.name}}

才对,写成_data.name这样没错,但其中Vue中数据代理的体现还体现在,它自动地在vm的身上创建了data中的属性

你对data的访问和修改,实际上操控的都是_data中的数据(这里就是数据代理的体现,用一个对象代理另一个对象的操作),_data和data中的数据又是关联的。

就可以通过name实现_data.name的操作,目的是编写代码更加方便


至此,结束。

如果你觉得这篇文章写的不错,多多点赞~收藏吧!

相关推荐
十一吖i2 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
koo3646 小时前
李宏毅机器学习笔记30
人工智能·笔记·机器学习
摇滚侠6 小时前
Spring Boot 3零基础教程,WEB 开发 内嵌服务器底层源码分析 笔记48
spring boot·笔记
菜鸟una7 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
桃子不吃李子7 小时前
nextTick的使用
前端·javascript·vue.js
报错小能手8 小时前
项目——基于C/S架构的预约系统平台 (1)
开发语言·c++·笔记·学习·架构
赤月幼狼9 小时前
clickhouse学习笔记(一)基础概念与架构
笔记·学习·clickhouse
小二·9 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
前端 贾公子9 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
qq_4198540510 小时前
自定义组件(移动端下拉多选)中使用 v-model
前端·javascript·vue.js