MVVM模型

view-页面HTML

viewModel-核心调度者协调器/双向数据绑定

model-数据模型

一种前端的开发模型，，MVVM针对前端的一种前端的框架，用来简化前端的开发。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

• 传统的js 直接写代码逻辑去操作DOM，例如原生JS:

html

<span id="name">span>

js

var dom = document.getElementById('name');
dom.innerHTML = 'TOM';
dom.style.color = 'yellow';

• 接下来，为了简化原生js操作DOM的麻烦，JQuery简化操作：

html

<span id="name">span>

js

$('#name').text("TOM").css("color", "yellow");

• 在接下来，MVVM框架出现，只需要关注数据结构，后面的双向绑定数据操作，交给viewModel来处理：

html

<div id="app">
	<input v-model="name" />
	<span>姓名:{{name}}span>
	<span>，年龄:{{age}}span>
div>

js

new Vue({
  el: "#app",
  data: {
  	name: 'TOM',
  	age: 18
  }
})