渐进式含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
Vue已经有了三个版本，目前最常用的是Vue2
实例化一个Vue对象，参数是一个选项对象，其中有两个重要的选项el,data
el: 指定Vue根组件的挂载点，将页面上已存在的DOM元素作为Vue根组件的挂载的地方data：声明需要响应式绑定的数据对象 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })只有根组件有el选项，另外根组件以外的Vue实例（组件）中，这样配置的data只在当前组件中生效，因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了
data：function(){ return {} }Vue模板对应的就是Vue中的View（视图）部分，不指定模板的情况下挂载点内部的内容就是模板； 模板看起来很像DOM，但其本质是字符串，Vue通过编译将模板转换成渲染函数(render函数),执行渲染函数可以得到一个虚拟DOM树vnode,再经过算法把vnode渲染成真实的DOM。 模板的渲染经历这样的过程：模板 → 渲染函数 → 虚拟DOM树 → 真实DOM
插值（Mustache）是Vue 实现数据绑定中最常见的一种形式，是使用双大括号{{}}的文本插值，主要作用是进行数据绑定，通过它可以轻松地在视图中显示数据并及时自动更新，无需手动控制。 表达式是指插值语法支持JavaScript 的表达式，Vue只能支持单个表达式 属性节点中不能使用插值表达式，为属性节点动态绑定数据，要用v-bind动态绑定属性。
<p>length属性：{{ str.length }}</p> <p>字符串连接：{{ num1 + '2'}}</p> <p>三目运算符:{{ num1 > num2 ? "是" : "否" }}</p> <p>四则运算：{{ num1+num2 }}</p> <p>比较运算符：{{ num1 > num2 }}</p> <p>数值类型的内置方法：{{ num1.toFixed(2) }}</p> <p>布尔值:{{ flag }}</p> <p>数组（转成了字符串）:{{ arr }}</p> <p>数组长度:{{ arr.length }}</p> <p>数组的索引取值:{{ arr[0] }}</p> <p>对象属性：{{ obj.name }}</p>指令是 Vue 提供的 HTML 标签的自定义属性，Vue中的指令带有v-前缀，通过这些属性能够操作页面元素。
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令、 v-on指令。
<a v-on:click="doSomething"> ... </a>可以用方括号括起来的js表达式作为一个指令的参数
<a v-on:[eventName]="doSomething"> ... </a>Vue中修饰符 (modifier) 是以半角句号（ . ）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
表单修饰符 如：v-model的修饰符 .lazy、.trim、.number事件修饰符 v-on的修饰符 .stop、 .prevent 、.capture、.self、.once 、.passive、.native鼠标按钮修饰符 如：.left 左键点击 .right 右键点击 .middle 中键点击键值修饰符组件是可复用的 Vue 实例，它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。 Vue构建的用户界面由相互独立的组件构成，
一个vue组件主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style。
利用Vue的静态方法component(),可以全局注册一个组件，相当于扩展了Vue构造器； 全局组件能在任何地方应用； 全局组件必须写在Vue实例创建之前。
Vue.component('组件名', { // ... 选项 ... })在实例的 components 选项中注册的组件。components 中的组件以键值对的形式存在，键名是局部注册的组件名，键值是组件的选项。
//... components: { //局部注册组件ComponentB 'ComponentB': { template: `<input v-model="title">`, data() { return { title: '这是组件B' } } } }动态组件：多个组件使用同一个挂载点,并动态切换 异步组件：异步组件是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，以备下次访问。
动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。
<component :is="currentTabComponent"></component> transition组件为组件的载入和切换提供动画效果
transition-group组件作为多个元素/组件的过渡效果
keep-alive组件能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 属性：
include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive> <keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染。 slot组件slot又称插槽，在父组件中使用子组件时，在子组件中使用slot组件，可以向子组件插槽传递父组件的模板内容，slot组件相当于子组件留给父组件的占位符。
父组件
<template> <div> <son> <p>我是父组件插槽内容</p> </son> </div> </template>子组件(son)
<template> <div> <slot></slot> </div> </template> 默认插槽 不带name属性的slot,一个不带 name 的 出口会带有隐含的名字“default”具名插槽 带name属性的slot，可以用来定义额外的插槽作用域插槽 作用域插槽内，父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值如果要在子组件中对接收到的数据做验证，可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } }) 子向父传值 用$emit方法触发子组件的自定义事件，在父组件中用v-on指令监听事件，并指定事件处理函数。Vuex是在组件外部管理状态，是用来管理组件之间通信的一个插件。
Vue是一个渐进式框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。
Vue.use(plugin)Vue.use()方法用于安装Vue.js 插件。如果插件(plugin)是一个对象，必须提供install方法。如果插件是一个函数，它会作为install方法。
install方法调用时，会将Vue作为参数传入。use方法需要在调用New Vue()之前被调用。当install方法被同一个插件多次调用，插件将只会被安装一次。路由是根据不同的url地址展现不同的内容或页面。在传统的多页面应用中，当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。 前端路由不会涉及到服务器，是用JS技术来实现不同内容的展示和切换的。使用前端路由时，不同的url地址同样展现不同的内容，但不会像服务器发起请求。
用new VueRouter(options)创建一个router实例，router实例的构建选项有routes、mode、base、linkActiveClass、linkExactActiveClass等等。
Vue-Router的前端路由有两个模式"hash"和"history"
routes选项配置一组路由对象，是一个数组，数组的每一项表示一条路由记录route，用一个对象表示
{ path: string, //1、路由匹配的路径 component?: Component, //2、路由映射的组件 name?: string, // 3、命名路由 components?: { [name: string]: Component }, // 4、配置命名视图组件 redirect?: string | Location | Function, //5、路由重定向 props?: boolean | Object | Function, //6、路由组件传递参数 alias?: string | Array<string>, //7、路由别名 children?: Array<RouteConfig>, // 8、嵌套子路由 beforeEnter?: (to: Route, from: Route, next: Function) => void, //9、 配置路由独享的守卫 meta?: any, // 10、自定义标签属性，比如：是否需要登录 }在模板中使用 组件能够渲染通过路由映射过来的组件,想要在哪里显示路由对应的组件 ，就在哪里写<router-view> 标签。 嵌套路由就是路由的多层嵌套，在一个被路由过来的页面（组件）下使用<router-view> 标签映射其他的组件。 如果不使用嵌套路由，应用的模板中只有一个，如果使用嵌套路由，那么在一个组件中还有<router-view>，这也就构成了嵌套。 实现嵌套路由的方法：
在配置配置中为父级的路由配置children属性，children属性值是一个数组，数组中的项和前面讲的路由对象几乎没有区别，但子路由中的path不需要加’/’，因为以“/”开头的嵌套路径会被当作根路径。在需要子路由vue组件中使用<router-view>Vue项目中如果引入了Vue router实例,就可以在Vue实例中通过$route访问到当前匹配到的路由对象。
path String,当前路由对象的名称|当前路由对象的路径，会被解析为绝对路径 query Object,路由中携带的查询参数 params Object,包含路由中的动态片段和全匹配片段的键值对。 matched: Array,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。即匹配到的所有的 RouteRecord 对象 fullPath String,当前路由完整的路径值 hash 当前路径的哈希值，带# meta Object,当前路由元信息 name: String,当前路径的名字，如果没有使用具名路径，则名字为空。在模板中使用 组件用来渲染通过路由映射过来的组件
在模板中组件用来定义导航链接。在其to属性中指定目标地址，to的属性可以是字符串也可以是对象，触发（默认click触发）导航会立刻把to的值传送给router.push()方法。
vue-router路由两种实现途径
根据标签的to属性对比路由配置，从而找到匹配的组件，并把组件渲染到<router-view> 标签所在的地方。
通过Vue Router的实例方法router.push()，router.replace()，router.go()，router.back()，router. forward()可以实现编程式导航。 传递参数的方法：
无论哪种路由导航方式都经常会需要传递参数
params传参：要求在配置路由的时候给路由配置name属性通过查询参数query传参：使用query传参时地址栏后面带上参数，和传统的url参数一致的，这种方式必须配合path来使用，而不能使用name。url传参 ： 要求路由配置时配置name属性，并在path中携带动态路径参数，以：开头在Vue项目中，路由跳转前经常要做一些验证，如登录验证，权限验证等，可以通过导航守卫来实现。导航守卫也叫路由守卫，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 守卫的应用场景有全局守卫、路由独享的守卫 、组件内的守卫。常有3个参数： 1、to 路由对象，要进入的目标路由对象 2、from 路由对象 ，要离开的路由对象 3、next 函数, 用于结束当前钩子
路由实例的原型上有两个钩子beforeEach和afterEach
单个路由有个钩子beforeEnter
Vue组件内，利用钩子beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave定义组件内的守卫
Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。采用集中式存储管理应用所有组件的状态（数据）。 Vuex是在组件外部管理状态，是用来管理组件之间通信的一个插件。 每一个Vuex应用的核心就是store（仓库）。store可以看成一个容器，通过new Vuex.Store()实例化一个store。
new Vuex.Store({ state: {}, getters:{}, mutations:{}, actions:{}, modules:{} });存储状态（数据）
从 state 中可以派生出一些状态，可以理解为state的计算属性。
mutations中定义同步修改状态state的方法，也是更改 Vuex 中state的唯一方法
Action用于提交 mutation，而不是直接变更状态，异步操作。从store的外部看action方法和mutation方法都用于修改state，但在store内部，实际上action不能直接操作state，在其内部需要去触发mutation方法来实现修改State。
为方便状态管理，将store分成一个个的模块，在每一个module中写state, getters, mutations, actions等。 给每个模块添加namespaced: true, 命名空间区分模块。
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Axios 不是Vue.js的插件，不能通过Vue.use()安装，经常被挂在到Vue的原型上全局使用。
Vue.prototype.$http = axios;参数：config是一个对象，保存着HTTP请求的配置选项,其中只有url是必选项。 返回值：是一个promise对象，axios中习惯用then和catch方法处理异步成功和失败。 常用配置选项：
url 用于请求的服务器URL，必选method 是发出请求时使用的请求方法 默认为getbaseURL 将被添加到url前面，除非url是绝对的。headers 是要发送的自定义 headersparams 是要与请求一起发送的URL参数,必须是纯对象或URLSearchParams对象data 是要作为请求主体发送的数据,适用于请求方法“PUT”，“POST”和“PATCH”timeout 指定请求超时之前的毫秒数。 PS:为了方便axios为所有支持的请求方法均提供了别名。Axios发送的某个请求，请求成功时then方法接受的响应包含以下信息
{ data: {}, //服务器提供的响应数据 status: 200, //服务器响应的 HTTP 状态码 statusText: 'OK', //服务器响应的 HTTP 状态信息 headers: {}, //服务器的响应头 config: {}, //为请求提供的配置信息，未设置的话Axios使用默认值 request: {} //生成此响应的请求,是一个XMLHttpRequest对象 }请求失败时，catch方法接受的响应是个Error对象 Error对象的response属性有可能是undefined，这种情况下一般通过响应拦截器来给response重新赋值一下，方便后续处理。
axios的interceptors实现拦截请求，拦截分为请求拦截和响应拦截，用于在发出请求前对请求进行统一的处理，接到响应后对响应的数据进行统一的处理。 如在请求时设置拦截为所有的请求头加上token，请求成功时（指HTTP请求成功）根据服务器返回的数据做相应处理，请求失败时返回错误提示。
下面是个简单的例子，真实的业务场景可能会复杂的多。
axios.interceptors.request.use(req => { req.headers['Authorization'] = '123456'; //一般token会被保存到客户端 return req; }) axios.interceptors.response.use( res=>{ if (res.status === 200) { return Promise.resolve(res.data) }else{ return Promise.reject(res) } }, error => { return Promise.reject(error.response); } )vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。可以轻松的创建新的应用程序，而且可用于自动生成vue和webpack的项目模板。
