低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

Vue使用

1.将下载号的vue.js引入项目.

<script type="text/javascript" src="vue.js"></script>

2.创建 view 视图

<div id="box">

<h1>{{ msg }} </h1>

</div>

3.通过vue实例化一个vue对象

var vm = new Vue({

el: '#box', // el：'选择器'

data: {

msg: 'hello, world!'

},

// 实例中，可以设置很多配置项

});

4.使用数据

将 data 中的变量 msg 放在双花括号内
修改 data 中的 msg ，会同 #box 内的步显示在页面中

实现原理分析：

DOM监听：

视图层发生变化，DOM监听到之后，会传到逻辑层进行处理。

数据绑定：

逻辑层把数据处理完成之后，通过数据绑定，把处理后的结构返回给视图层。

插值表达式

使用双大括号**{ }**来包裹 js 代码构成插值表达式。

插值表达式作用

将双大括号中的数据替换成对应属性值进行显示。

Vue.js指令

指令（Directive）是特殊的带有 v- 前缀的特性

v-if

根据表达式的真假来插入和删除元素。

<h1 v-if="isShow">表达式的值为真，我就能显示</h1>

v-else

为v-if添加一个"else块"，v-else元素必须立即跟在v-if元素的后面，否则不能被识别

<h1 v-if="isShow">表达式的值为真，我就能显示</h1>

<h1 v-else>v-if不成立的时候，我就显示出来了</h1>

v-show

控制切换一个元素的显示和隐藏

<div class="div1" v-show='isShow'></div>

v-on

HTML 元素绑定事件监听

事件名称 ='函数名称()'

@事件名称 ='函数名称()'

<button v-on:click='fn()'>toggle</button>

//v-on: 可以简写成 @

<button @click='fn()'>toggle</button>

v-model（表单绑定）

能轻松实现表单输入和应用状态之间的双向绑定

双向绑定

指的是我们在vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。

v-model = 变量

v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上

v-bind

绑定 HTML 元素的属性

<img v-bind:src="imageSrc"> 等价于 <img :src="imageSrc"> //绑定一个属性

//绑定多个属性

<div v-bind:class="{'textColor':isColor, 'textSize':isSize}">多个样式的绑定</div>

v-for

遍历 data 中的数据，并在页面进行数据展示

v-for = ' (item, index) in items '

item 表示每次遍历得到的元素
index 表示 item的索引，可选参数
items表示数组或者对象

v-text

更新元素的文本内容

v-text=****'msg'

与双大括号语法功能类似

与插值表达式的区别
- 插值表达式后面可以继续添加内容
- v-text指令会全部替换标签中的内容

v-model 指令扩展

v-model****与布尔值绑定

vue下载与部分指令详解

vue

下载地址

前端框架

MVC与MVVM框架