Vue：MVVM模型

1. 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模型  

• 

  1.  Model:MVVM中的Model简写为M。Model代表整个Web项目所需要的数据模型, Model含有大量信息，但它并不具有任何行为逻辑，它只是数据，因而它不会影响浏览器如何展示数据。

  2. View:在MVC中, View是不能自己改变的,通常由控制器操作DOM来改变View。而在MVVM中， View是具有主动性的，因为它包括了一些数据绑定、事件和行为，这些都会直接影响Model和ViewModel。View不但负责自身的展示，而且会将自身的变化同步到ViewModel中。  

  3. 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>