什么是MVVM
MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定，Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
Model
数据层，从服务器或网络上请求下来的数据
View
视图层，在前端开发中通常是DOM层，用来给用户展示各种信息
ViewModel
视图模型层，沟通View与Model的桥梁，一方面，它实现了Data Binding（数据绑定）将model的改变实时反映到view中。另一方面，它又实现了DOM Listeners（DOM监听）监听DOM发生的一些事件（点击，鼠标移动，滚动...），并在需要时改变model层中对应的数据。
请输入图片描述在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上，在这种开发模式下开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计，数据与视图的交互由ViewModel来完成，这极大的提高了开发效率与后期的可维护性。
text 代码:<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{result}}</h2>
<button type="button" @click="add">加1</button>
<button type="button" @click="sub">减1</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app= new Vue({
el:"#app", //用于要挂载要管理的元素
data:{ //定义数据
result:0
}，
methods:{
add(){
this.result++
},
sub(){
this.result--
}
}
})
</script>
</body>在代码中，data相当与Model层，静态页面相当与view层，new的vue实列相当于ViewModel层，vue实列会将data中绑定的数据（result）实时响应到页面（View）中，而当页面上的按钮被点击时，vue实列（ViewModel）监听到事件改变了result的值后，同时改变data中result的值。
本站由
731
条评论 我要发表评论