Vue
Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。
JavaScript框架
jQuery：大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
Angular：将后台的MVC模式搬到了前端并增加了模块化开发的理念
React：Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
Axios：前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;
UI框架
Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
Bootstrap：Twitter推出的一个用于前端开发的开源工具包
AmazeUI：又叫"妹子UI"，一款HTML5跨屏前端框架
JavaScript构建工具
Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载
主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa )并能备够调用到底层件(如:传感器、GPS、 摄像头等)，打包方式主要有以下两种:
云打包: HBuild -> HBuildX， DCloud出品; API Cloud
本地打包: Cordova (前身是PhoneGap)
NodeJS 框架及项目管理工具如下:
Express: NodeJS框架
Koa: Express简化版
NPM:项目综合管理工具，类似于Maven
YARN: NPM的替代方案，类似于Maven和Gradle的关系
Model:模型层，在这里表示JavaScript对象
View:视图层,在这里表示DOM (HTML操作的元素)
ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model)
低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
注意：
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值
下拉框
如果v-model表达式的初始值未能匹配任何选项，select元素将被渲染为“未选中”状态。在IOS中，这会使用户无法选择第一个选项。因为这样的情况下，IOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:
从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF (跨站请求伪造)
由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁!
data.json
简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存!
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;
注意
v-bind 可以缩写为一个：
v-on 可以缩写为一个@
说明
Vue的开发都是要基于NodeJS，实际开发采用vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目！
vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板
主要的功能
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
测试安装成功: 输入以下命令有版本号输出即为安装成功
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle
先创建一个包 交由idea打开 会生成一个.idea文件 那么就说明该文件就交由idea负责
在idea中创建modules包，再创建hello.js
hello.js 暴露接口 相当于Java中的类
创建main.js 当作是js主入口
main.js 请求hello.js 调用sayHi()方法
在主目录创建webpack-config.js
webpack-config.js 这个相当于webpack的配置文件 enrty请求main.js的文件 output是输出的位置和名字
在idea命令台输入webpack命令（idea要设置管理员启动）
完成上述操作之后会在主目录生成一个dist文件 生成的js文件夹路径为/dist/js/bundle.js
在主目录创建index.html 导入bundle.js
index.html
vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
将之前案例由vue-cli生成的案例用idea打开
清理不用的东西 assert下的logo图片 component定义的helloworld组件 我们用自己定义的组件
清理代码 以下为清理之后的代码 src下的App.vue 和main.js以及根目录的index.html
这三个文件的关系是 index.html 调用 main.js 调用 App.vue
main.js
App.vue
在components目录下创建一个自己的组件Content,Test,Main(这两个和Content内容一样的就不放示例代码了)
Content.vue
安装路由,在src目录下,新建一个文件夹 : router,专门存放路由index.js(默认配置文件都是这个名字)
在main.js中配置路由
在App.vue中使用路由
启动测试一下 ： npm run dev
创建一个名为 hello-vue 的工程 vue init webpack hello-vue
安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
创建成功后用idea打开，并删除净东西 创建views和router文件夹用来存放视图和路由
Main.vue
Login.vue（用的饿了么UI中的代码）
创建路由,在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件
main.js是index.html调用的 所以基本上所有东西都导出到这
一定不要忘记扫描路由配置并将其用到new Vue中
在App.vue中配置显示视图
最后效果
创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件
在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件
修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件
配置嵌套路由修改 router 目录下的 index.js 路由配置文件，使用children放入main中写入子模块
路由嵌套实战效果图
第一种取值方式
修改路由配置
传递参数Main.vue
在要展示的组件Profile.vue中接收参数 使用 {{$route.params.id}}来接收
第二种取值方式，使用props 减少耦合
传递参数和之前一样
在Profile.vue接收参数为目标组件增加 props 属性
效果
index.js
路由模式有两种
hash：路径带 # 符号，如 http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login
创建一个NotFound.vue视图组件
修改路由配置index.js
效果图
beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行
Profile.vue
参数说明：
to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例
安装 Axios
main.js引用 Axios
准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下 static/mock/data.json
在 beforeRouteEnter 中进行异步请求