1.vue.js的M-V-VM的思想

风落不归处

已于 2022-05-17 15:41:08 修改

阅读量227

点赞数

文章标签： vue.js 前端 javascript

于 2022-05-17 13:27:48 首次发布

本文链接：https://blog.csdn.net/weixin_43893483/article/details/124814425

版权

MVVM是一种前端开发架构模式，由Model、View和ViewModel组成。Model代表Vue实例的数据属性，View是数据显示的HTML模板，而ViewModel（即vue实例）作为桥梁，连接并同步Model和View。通过双向数据绑定，ViewModel自动监控并保持数据的一致性。开发者可以通过vm对象访问和操作数据，如vm.$data、vm.$el等。

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

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，是一种代码分工思想来的。

Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

View指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板”

ViewModel指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接View和Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。所以data里面的数据被显示在标签中就是vm对象自动完成的。vm对象会时刻的监控View和Model的变化，并保持双方数据的一致性。有时候这个特性也叫双向数据绑定。

在浏览器中可以在console.log通过vm对象可以直接访问el和data属性，甚至可以访问data里面的数据

vm.$el //vm对象可以控制的范围，就是#app的内部

vm.$el.parentElement // #app标签本身

vm.$data // vm对象要显示到页面中的数据

vm.$data.message // 访问data里面的数据

vm.message // 这个message就是data里面声明的数据，也可以使用vm.变量名显示其它数据，message只是举例。