（三）通过Vue实例理解MVVM原理
程序员文章站
2024-02-08 21:57:22
...
三、Vue中的MVVM（Model-View-View-Model）
1.为什么会有MVVM？
现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，MVVM模型应运而生。
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
2.ViewModel如何编写？
需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。
以第二章的第三个案例为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
add:function (){
console.log('add被执行');
this.counter++
},
sub:function (){
console.log('sub被执行');
this.counter--
}
}
})
</script>
</body>
</html>
运行结果：
上面这个例子，可以用下面这个图来解释MVVM：
view和model之间的通信需要通过ViewModel来完成。
- view层：视图层，在前端开发中，通常就是DOM，作用是给用户展示各种信息。
- model层：数据层，数据可以是我们固定死的数据，也可以是网络上的数据。
- ViewModel层：视图模型层，是桥梁。具体作用如下
Data Binding：数据绑定，把model中data里面的数据绑定到view里面，ViewModel会对数据进行解析后更新到view里面。
DOM listeners：DOM事件监听，当view页面上发生一些操作事件（点击、touch等）的时候，ViewModel就会把这些事件回调到model里面，做更多相关操作（比如改变对应Data的值）。
下一篇： SpringBoot项目打包成jar包