如何理解MVVM

说一下对MVVM的理解
MVC
　　Model,View,Controller。
 
　　View是视图，界面，有输入框，有按钮，有列表等。
　　Model是数据源，比如todolist里面等title，list。
　　Controller是控制器，控制view的变化，也能控制model的变化。
 

MVVM
<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　<title>Document</title>
</head>
<body>
　　<div id="app">
　　　　<input v-model='title'/>
　　　　<button v-on:click='add'>submit</button>
　　　　<ul v-for='item in list'>
　　　　　　{{item}}
　　　　</ul>
　　</div>

　　<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
　　<script>
　　　　var data = {
　　　　　　title: '',
　　　　　　list: []
　　　　}

　　　　var vm = new Vue({
　　　　　　el: '#app',
　　　　　　data: data,
　　　　　　methods: {
　　　　　　　　add: function(){
　　　　　　　　　　this.list.push(this.title);
　　　　　　　　　　this.title = ''
　　　　　　　　}
　　　　　　}
　　　　})
　　</script>
</body>
</html>

看这段demo。上面是view层，中间data是数据源，下面vm对应的就是vm，vm就是view model。就是view和model中间的一个桥。完成了视图中数据的绑定。视图中数据的变化需要vm来控制。有vm的存在，彻底的分离view 和 model


Model - 模型、数据
View - 视图、模版（视图和模板是分离的）
ViewModel - 连接Model 和 View

三者之间的联系，脑补下面的demo

ViewModel的理解，联系View 和 Model。view可以通过事件绑定的方式影响到model。model可以通过数据绑定影响到view。




关于ViewModel
MVVM是MVC的一个微创新，就是VM，MV不是。
但其中的ViewModel确实是一种创新
真正结合前端场景应用的创建
 
posted @ 2019-06-18 06:42  wzndkj  阅读(237)  评论(0)  编辑  收藏  举报