课程目标
- vuejs 简介
- 掌握 MVVM 开发思想
- vuejs 初体验
- 掌握 vuejs 的常见指令
- 掌握 双向数据绑定
- 掌握 过滤器 的使用
- 掌握 axios 的使用
- 掌握 vuejs 的生命周期
- 掌握 vuejs 组件化开发
- 掌握 组件间 的通信
- 掌握 单文件组件
- 掌握 vue-router 的使用
- 掌握 vue-cli 的使用
Vuejs 简介
什么是Vue？
Vue (读音 /vjuː/，类似于 view) 是国人Evan You（尤雨溪），曾任职于Google Creative Lab创建一个前端的MVVM的框架【备注：一般在前端里面对MVC进行单独的解读，有一系列的变种的叫法，例如常见的有MVVM、MVP、MVX、MV*... 但是本质上来说和的后端的MVC的思想还是差不多的】。
该框架彻底颠覆了传统的DOM操作，使用该框架后，就不再需要传统的DOM操作，以及DOM元素的修改（$(“#div”).html(‘hi’)），Vue是 数据驱动 为主的，用户无需手动操作DOM元素，Vue底层会帮我们完成，而对于开发者来说更多只要去关心自己业务数据的处理，适合以数据curd操作为主的SPA应用（single page application 单页面应用： 网易云音乐、worktile、teambition.....）。
思考：为什么现在单页应用如此的火热？
在传统web开发中，基本都是靠a链接跳转来完成信息的展示；但是随着移动互联网的到来，很多的web项目都必须在手机端进行运行，这个时候如何还是传统的模式，在手机端进行页面通过a链接来跳转刷新，则势必会影响用户体验。所以单页应用慢慢的流行起来，就是在一个页面内完成所有信息的展示和基本的操作。不用页面整体刷新，只需要局部的刷新，类似一个原生的app体验。
需要注意：同类型的框架还有Google管理的angularJs、国内由司徒正美开发的avalon、国外的backbone等....
MVVM概述
MVVM是一种分层的开发思想。通过分层后，可以非常利于开发和维护。其基本的含义如下：
1.M代表模型 主要是负责业务数据的处理，前端项目中是json字面量对象（需要注意该数据一般是前台通过ajax进行获取的数据）
2.V代表视图 主要是业务数据在用户面前显示和数据的收集，前端项目中是html（表现形式主要是做页面展示和用户的登录或者是注册）
3.VM代表控制器 主要起协调作用，负责调用模型来对数据处理，协调模型和视图之间的关系，其表现形式为Vue类的实例对象（当我们使用vue这个产品的时候，vue.js这个框架会给我们提供一个 Vue 这样的一个类，然后我们实例化该类即可得到该类的一个实例，其表现形式就是我们后端里面的Controller的实例）
哪里获取Vue？
注意：目前Vue存在1.x和2.x系列。 官网：cn.vuejs.org/ 仓库地址：github.com/vuejs/vue CDN：www.bootcdn.cn/vue/
Vue入门使用
Vue小试牛刀
案例：完成一个快递运费计算公式，分别使用原生DOM操作、jQuery操作、以及Vue操作。
- 传统的DOM操作完成
思路：1. 为元素绑定监听事件 2. 获取DOM元素的值 3. 自己的业务 4. DOM元素值修改
- 使用jQuery实现【提供丰富的DOM选择器和强大的方法】
思路：和上面的是一样，但是简化DOM元素的查找，同时提供很多有用的方法，可以减少重复性的操作。
- 使用Vue实现
思路： 1. 先引入Vue框架 2. 定义一个区域，交给Vue管理 3. 定义一个v-model 4. 使用{{ express }}
总结：通过三种方式对比测试，发现Vue实现方案里面没有传统的DOM操作，只需要关心数据即可，这就是程序开发本身的面貌。
概念：例如以v-开头的字符被称为：Vue的指令，就是扩展了html元素的属性
概念：{{ express }} 将表达式写在双大括号里面。一般也被称为插值表达式，然后把表达式的运算结果绑定到html上面，用来显示数据。
总结：为什么要使用前端的MVVM框架呢？
答：对于web前端页面的开发，起初传统的开发思路基本都是DOM元素选取，然后对DOM元素的属性进行操作。在使用原生的JavaScript操作的时候还需要注意兼容的考虑，这个时候我们就需要使用jQuery来解决兼容性，同时利用jQuery提供的方法可以快速的进行开发。对于以上的两种开发模式来说都是少不了DOM的操作。但是实际开发我们关注的点应该是在数据上面，而不是DOM元素的操作。
Vue之MVC
一般在前端开发里面都不叫MVC，都叫MVVM。因为C主要是负责实例化模型和视图的载入，起的是协调的作用。所有C是使用VM代替的。
Vue标准开发模式
Vue中如何声明模型数据？
模型数据的展示
- 基本类型数据展示
- 复合数据类型展示
Vue指令
- v-model指令
- v-for指令
- v-show指令
- v-if指令
- v-on指令
- v-text指令
- v-bind指令
Vue之双向数据绑定
- 模型到视图
- 视图到模型
