Vue
简介
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
为什么要使用Vue.js
- 轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
- 移动优先。更适合移动端， 比如移动端的Touch事件
- 易上手，学习曲线平稳，文档齐全
- 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性
- 开源，社区活跃度高
前端工程
前后端分离
双向绑定(MVVM)
什么是双向数据绑定
Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
- Model：模型层， 在这里表示JavaScript对象
- View：视图层， 在这里表示DOM(HTML操作的元素)
- ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者
- ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化， 并能够通知数据发生改变
至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处
- 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
- 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
- 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
- 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。
Vue.js指令
指令是特殊的带有 v- 前缀的特性，一个标签内可以写多个指令，多个指令间使用空格分隔。开发中经常使用的指令有：
v-if 指令
v-if 指令被称为条件渲染指令，它根据表达式的真假来插入和删除元素，语法如下：v-if=“表达式”
v-else 指令
v-else 指令为 v-if 指令添加一个”else块“，v-else 元素必须立即跟在v-if元素的后面，否则不能被识别。语法如下：
v-if不成立的时候，才会显示
v-show 指令
v-show 指令控制切换一个元素的显示和隐藏，语法如下：v-show=“表达式”
总结：
v-if 指令和 v-show 指令使用很相似，两者都是条件渲染指令，区别如下：
v-show指令：条件不满足时，元素会被设置 style=“display:none” 样式
v-if指令：条件不满足时，元素不会渲染到HTML中
如果判断条件需要频繁切换，使用v-show指令，如果判断条件不需要频繁改变，使用v-if指令
v-on 指令
v-on 指令为HTML元素绑定事件监听，语法如下：v-on:事件名称="函数名称()"可以简写为：@事件名称=“函数名称()”
v-model 指令
v-model 指令能轻松实现表单输入和应用状态之间的双向绑定，双向绑定指的是在Vue实现中的data与其渲染的DOM元素上的内容保持一致，两者无论哪一方被改变，另一方也会相应的更新为相同的数据，语法如下：v-model=“变量”
v-bind 指令
v-bind 指令可以在其名称后面带一个参数，参数通常是HTML元素的特性。v-bind 指令是动态绑定指令，默认情况下自带属性的值是固定的，为了能够动态的给这些属性添加值，可以使用v-bind 指令，语法如下：v-bind:属性名="表达式"简写语法为：:属性名=“表达式”
v-for 指令
v-for 指令可以遍历data中的数据，并在页面进行数据展示，语法如下：v-for="(item,index) in items"
item表示每次遍历得到的元素；index为可选参数，表示item的索引；items表示数组或者对象。
组件(模块)开发
组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
组件分为全局组件和局部组件，全局组件时指在不同作用域内均可使用的组件；局部组件是指只在定义该组件的作用域内可以使用的组件。
虚拟DOM
Axios异步通信
什么是Axios
Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：
- 从浏览器中创建
XMLHttpRequests - 从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
Axios库的引入
Axios库可以通过NPM安装的方式来引入或者通过CDN的方式来引入，在Vue项目中引入Axios库后，就可以像Ajax一样提供网络请求服务。引入命令如下：
计算属性
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!
插槽slot
插槽（slot）的目的在于让组件的可扩展性更强，用来混合父组件的内容与子组件自己的模板。
插槽分为匿名插槽和具名插槽。
vue-cli
vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板，预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速
Webpack
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
vue-router路由
路由在Vue项目开发中使用较为广泛，复杂项目中多个页面间的跳转都需要用到路由。
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class的链接
- HTML5 历史模式或hash模式， 在IE 9中自动降级
- 自定义的滚动行为
路由嵌套/路由钩子
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。
钩子函数
|