一种前端的开发模型,,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
}
})