如何理解MVVM

最新推荐文章于 2021-06-03 00:14:50 发布

weixin_30421525

最新推荐文章于 2021-06-03 00:14:50 发布

阅读量47

点赞数

原文链接：http://www.cnblogs.com/wzndkj/p/11043249.html

版权

说一下对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确实是一种创新

真正结合前端场景应用的创建

转载于:https://www.cnblogs.com/wzndkj/p/11043249.html

weixin_30421525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何理解MVVM

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

扫一扫

如何理解MVVM

“相关推荐”对你有帮助么？