一、VUE 简介
什么是VUE?
VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。
如何理解框架？
可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。
什么场景使用VUE？
绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博...
VUE 快速入门
官方js文件下载
cn.vuejs.org
业务及代码实现
构建HTML页面，呈现如下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。
第一步：定义HTML页面并引入vue.js文件。
Document
第二步：在html页面中的body内部添加如下元素。
{{n}}
说明：
1)在界面中要添加vue对象要监控元素,习惯上都用 id="app"
2)找到界面中将来可能发生变化的位置，用{{变量名}}特殊语法标记出来
3)找到界面中可以点击的位置绑定事件处理函数。
第三步：在html页面中的body底端部分构建JS代码实现
在JS中创建一个Vue类型的对象来监视页面中的内容。
其中：
1)el(element缩写)属性:"选择器"，为Vue对象要监视的范围。
2)页面所有变量，都必须保存在data属性中，且以对象属性形式保存。
3)页面所有事件处理函数，都必须保存在methods属性中，且以对象方法形式保存。02-VUE中的MVVM设计分析
发布于 10月8日
MVVM 简介
背景分析
在早期的web前端开发中，我们通常将页面构成分成三部分:
- html 用于定义网页结构、呈现网页内容。
- css 为页面元素添加相关样式。
- JS 为页面添加交互行为。
在这种开发结构中，因为HTML和CSS中不支持变量，不支持分支、循环等程序结构，任何一个地方的修改都需要依赖js来实现。导致js中存在大量重复的步骤和编码！
MVVM设计概述
MVVM是一种设计思想，对早期的web前端开发做了增强，将前端代码按其职责的不同分成了三部分：
- 界面(View)部分：由html+css构成，并允许在html,css中直接使用变量，表达式，语句等。
- 模型部分(Model)：一般为一个JSON格式的对象，用于存储view中需要的数据和函数。
- 视图模型(ViewModel):专门负责自动维护模型对象中的变量与界面中的变量同步。
因为有了ViewModel的存在，数据可以自动同步到界面上，几乎避免了大量重复的编码！
二、VUE中的MVVM实现
设计分析
MVVM在VUE前端框架中的设计，如图所示：
代码实践分析
基于VUE中MVVM分析，先对代码实现过程进行分析，如图所示：
三、VUE中的插值(interpolation)语法实现
背景分析
在传统的html页面中我们可以定义变量吗？当然不可以，那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义html标签库方式，然后以html作为模板，在服务端解析也可以实现，但这样必须通过服务端进行处理，才可以做到，能不能通过一种技术直接在客户端html页面中实现呢？
VUE中的插值语法
这种语法是为了在html中添加变量，借助变量方式与js程序中的变量值进行同步，进而简化代码编写。其基本语法为：
{{变量或js表达式}} 在{{}}内部可以写:变量、算术计算、 三目、 访问数组元素、 创建对象、调用函数等，总之只要有返回的合法的js变量和表达式都行。但是不可以写程序结构(分支和循环)以及没有返回值的js表达式。
例如：
Document
用户名:{{username}}
性别:{{gender==1?"男":"女"}}
小计:¥{{(price*count).toFixed(2)}}
下单时间: {{new Date(orderTime).toLocaleString()}}
今天星期{{week[new Date().getDay()]}}
三、VUE中常用的指令操作
背景分析
传统的html并不支持表达式、分支语句、循环语句等结构的定义，为了弥补其不足很多前端框架，模板引擎通过在html元素中添加自定义属性，然后底层再借助解析引擎对html自定义属性进行处理，以这样的方式来增强html的功能。
Vue中的常用指令
v-bind
在html中假如希望元素的属性值随程序内容的发生而变化，可以借助v-bind或:代替，其基本语法如：
<元素 v-bind:属性名="变量或js表达式">也可以采用其简化形式，其基本语法如：
<元素 :属性名="变量或js表达式">案例分析：
hello
v-show
v-show为一个专门控制元素的显示隐藏的特殊指令，其基本语法为：
<元素 v-show="bool类型的变量或返回bool类型的js表达式">当Vue对象扫描到v-show时，就会立刻执行""中的变量或js表达式,
如果变量或js表达式的值为true，则什么也不干，元素保持原样显示。如果变量或js表达式的值为false，则new Vue()自动为当前元素添加display:none。
示例关键代码如下：
×
v-if 和 v-else
v-if 和 v-else 是在html实现分支控制，二选一的一种实现方式，在使用时，v-if和v-else对应的的两个元素必须紧挨着写！中间不能插入其他元素，其基本语法为：
<元素1 v-if="boolean类型的变量或js表达式">
<元素2 v-else> 示例关键代码如下：
v-else-if
v-else-if专门和v-if搭配使用，控制多个元素多选一显示的特殊的指令。其基本语法为：
<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
<元素3 v-else-if="条件3">
... ...
<元素n v-else>注意，v-if和v-else-if和v-else之间必须连着写，不能插入其他元素。
示例关键代码如下：
优秀
良好
及格
及格
v-for
v-for是一个专门用于根据数组内容反复生成多个相同结构的元素的特殊指令。其语法为：
<要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组">示例关键代码如下：
-
{{i+1}} - {{t}}
v-for还可以遍历对象属性，例如：
-
{{key}} : {{value}}
v-for 还可以进行计数，例如：
- {{i}}
v-on
v-on 是一个专门绑定事件处理函数的指令，其基本语法为：
<元素 v-on:事件名="事件处理函数名()">v-on 也可以使用@符号代替，其基本语法结构为：
<元素 @事件名="事件处理函数名() 如果事件处理函数不需要传入实参值，则()也可省略,例如：
<元素 @事件名="事件处理函数名">凡是在页面中定义的事件处理函数，都要在new Vue()中的methods成员内添加对应的函数实体。
示例关键代码如下：
d1
d2
v-text
v-text是可代替{{}}绑定元素内容的特殊指令,用于设置元素内部的文本内容，而且可以防止因网络延迟短暂显示{{}}的现象。其语法为：
<元素 v-text="变量或js表达式"> 示例关键代码如下：
v-model
v-model 是用于实现双向绑定的指令，既能将程序中的变化，自动更新到页面上(model->view)，又能将页面上发生的变化，更新回程序中的变量中(view->model),其基本语法为：
<表单元素 v-model:value="变量">示例关键代码如下：
select元素的双向绑定
一个select下包含多个option元素。所有备选值value，都分布在每个option上。但是每个备选值value也是写死的。用户每次选择不同的option时，其实select元素会将选中的option的value值，修改到select的value属性上。其语法为：
示例代码如下：
![]()
总结(Summary)
本节就是对vue简单的一个介绍及实现