MVVM模型
MVVM简介MVVM模式使用的是数据绑定基础架构,它可以轻松构建视图用户界面(User Interface,UI)的必要元素。ViewModel负责取出Model数据的同时帮忙处理视图(View)中由于需要展示内容而涉及的业务逻辑,MVVM没有MVC模式的控制器,也没有MVP模式的展现器,有的只是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。我们只需编写一些绑定器,利用一些指令绑定,采用数据双向绑定模式,视图的变化就会自动更新到ViewModel中,ViewModel的变化也会自动同步到视图中进行显示。MVVM模式实现了视图和数据的分离、UI设计与业务逻辑的分离。MVVM代表框架有Vue. js、React. js、Angular. js和Ember. js。Vue. js是一个提供了MVVM模型的双向数据绑定的JavaScript框架,专注于View 层。它的核心是MVVM中的VM,即ViewModel。ViewModel负责连接View和Model,保证视图和数据的一致性,这种轻量级的框架使前端开发更加高效和便捷。MVVM模型
Model:MVVM中的Model简写为M。Model代表整个Web项目所需要的数据模型, Model含有大量信息,但它并不具有任何行为逻辑,它只是数据,因而它不会影响浏览器如何展示数据。
View:在MVC中, View是不能自己改变的,通常由控制器操作DOM来改变View。而在MVVM中, View是具有主动性的,因为它包括了一些数据绑定、事件和行为,这些都会直接影响Model和ViewModel。View不但负责自身的展示,而且会将自身的变化同步到ViewModel中。
ViewModel:MVVM中的VM可以被看作MVC中的控制器,VM主要负责用一定的
业务逻辑对数据进行改变或转换,也负责将Model的变
化反映到View上,而当View自身有变化时,也会同步 View
Model进行改变。
使用Vue.js理解MVVM
在Vue. js中,呈现页面HTML标签的是View, Model是用于渲染的数据,ViewModel是创建的Vue实例。数据可以在Vue实例中写,也可以重新创建一个装载数据的对象。Vue. js的最大特点是实现了数据的双向绑定。在一般情况下,需要通过编写代码,对从服务器获取的数据进行渲染,并展现到视图中。每当数据有变更时,会再次进行渲染,从而更新视图,使得视图与数据保持一致。Vue不会反复渲染页面更新视图,而是会通过用户的交互,产生状态、数据的变化,将视图对数据的更新同步到ViewModel中,进而提交到后台服务器。
实例帮助理解双向数据绑定
下面通过一个实例来理解双向数据绑定
<div id="div_pili">姓名:{{name}}<br />性别:{{sex}}<br /><hr><!-- 在输入框里输入内容会同步到页面上 -->姓名:<input type="text" name="input2" id="input2" v-model="name"/><br />性别:<input type="text" name="input2" id="input2" v-model="sex"/><br /></div><script>var chang=new Vue({el:'#div_pili',data:{name:'pili',sex:'男'}})</script>