前文提要
数据代理的概念
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 class="box" id="box">
<h1>
hello,world{{name}}
</h1>
</div>
VM,视图模型
至于VM,视图模型,则是整个Vue实例。
通过这种关系,也就是通过这种数据代理的方法,将html中的数据和Vue实例中的data数据关联起来。
在第一个M中的代码用vm指向整个Vue实例,代码中的data会在vm上生成一个属性_data,_data不是Vue实例中的data,但是实例中的data的数据,_data中都有。
接着就是一串代码
<div class="box" id="box">
<h1>
hello,world{{name}}
</h1>
</div>
在这两层大括号中,我们可以直接写js表达式,也可以写出Vue实例中含有的各类属性。
那么Vue实例中有name吗,按照上面的讲述,是不是应该写成
hello,world{{_data.name}}
才对,写成_data.name这样没错,但其中Vue中数据代理的体现还体现在,它自动地在vm的身上创建了data中的属性。
你对data的访问和修改,实际上操控的都是_data中的数据(这里就是数据代理的体现,用一个对象代理另一个对象的操作),_data和data中的数据又是关联的。
就可以通过name实现_data.name的操作,目的是编写代码更加方便
至此,结束。
如果你觉得这篇文章写的不错,多多点赞~收藏吧!
原文地址:https://blog.csdn.net/Aer_7z/article/details/134588052
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_7633.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!