大学 两学一做专题网站,深圳精准网络营销推广,用什么网站开发,做动漫主题的网站文章目录 前文提要数据代理的概念MVVM模型和Vue中的数据代理M#xff0c;模型V#xff0c;视图VM#xff0c;视图模型 前文提要
本人仅做个人学习记录#xff0c;如有错误#xff0c;请多包涵 数据代理的概念
使用一个对象代理对另一个对象中属性的操作。
MVVM模型和Vu… 文章目录 前文提要数据代理的概念MVVM模型和Vue中的数据代理M模型V视图VM视图模型 前文提要
本人仅做个人学习记录如有错误请多包涵 数据代理的概念
使用一个对象代理对另一个对象中属性的操作。
MVVM模型和Vue中的数据代理
Vue框架是建立在MVVM的基础上开发的。 MVVM框架模型了解什么是MVVM框架 第一个M代表Model模型也就是数据 第一个V代表View视图也就是呈现出来的效果 最后的VM代表ViewModel是视图模型是抽离出来的部分逻辑代码用于构建视图和模型之间的关联能够借此管理两部分。
M模型
Vue中的Model也就是Vue实例中的data中的数据也就是下文data后大括号中的内容
const vm new Vue({// el: #box,data: {name: 这里是name的值,}
})V视图
Vue中的View视图则是html中嵌入了Vue框架特殊语法待处理的模版代码
div classbox idboxh1hello,world{{name}}/h1/div例如这里的div标签就是我理解中的Vue里的视图
VM视图模型
至于VM视图模型则是整个Vue实例。
通过这种关系也就是通过这种数据代理的方法将html中的数据和Vue实例中的data数据关联起来。
在第一个M中的代码用vm指向整个Vue实例代码中的data会在vm上生成一个属性_data_data不是Vue实例中的data但是实例中的data的数据_data中都有。
接着就是一串代码
div classbox idboxh1hello,world{{name}}/h1/div在这两层大括号中我们可以直接写js表达式也可以写出Vue实例中含有的各类属性。 那么Vue实例中有name吗按照上面的讲述是不是应该写成
hello,world{{_data.name}}才对写成_data.name这样没错但其中Vue中数据代理的体现还体现在它自动地在vm的身上创建了data中的属性。 你对data的访问和修改实际上操控的都是_data中的数据这里就是数据代理的体现用一个对象代理另一个对象的操作_data和data中的数据又是关联的。 就可以通过name实现_data.name的操作目的是编写代码更加方便 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
