MVVM

jquery实现to-do-list

<div>
	<input type="text" name="" id="txt-title" />
	<button id="btn-submit">submit</button>
</div>
<div>
	<ul id="ul-list"></ul>
</div>

<script src="https://cdn.bootcss.com/jquery/jquery.min.js"></script>
<script>
	var $txtTitle = $("#txt-title");
	var $btnSubmit = $("#btn-submit");
	var $ul = $("#ul-list");
	$btnSubmit.click(function(){
		var title = $txtTitle.val();
		if(!title){
			return;
		}
		$li = $('<li>' + title + '</li>');
		$ulList.append($li);
		$txtTitle.val("");
	});
</script>

vue实现to-do-list

<div id="app">
	<div>
		<input v-model="title" />
		<button @click="todo">submit</button>
	</div>
	<ul>
		<li v-for="item in list">{{item}}</li>
	</ul>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			title: '',
			list: []
		},
		methods: {
			todo: function(){
				this.list.push(this.title);
				this.title = "";
			}
		}
	});
</script>

两者的区别

• 数据和视图的分离，解耦（开放封闭原则：对扩展开放，对修改封闭）
• 以数据驱动试图，只关心数据变化，DOM操作被封装

MVC：

• M: Model 数据
• V: View 视图
• C: Controller 控制器

第一种情况：

第二种情况：

MVVM

• M: Model 模型、数据
• V: View 视图、模版（视图和模型是分离的）
• VM: ViewModel 连接Model和View (数据绑定和事件绑定)
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190506010914303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW1vemlxaWFu,size_16,color_FFFFFF,t_70

关于ViewModel

MVVM不算是一种创新，但其中的ViewModel确实是一种创新，真正结合前端场景应用的创建。