一、vue简介
1、Vue是一个前端js框架，由尤雨溪开发，是个人项目
2、vue是渐进式JavaScript框架：
“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念
3、Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，并且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用
4、Vue是一个MVVM的js框架，但是，Vue 的核心库只关注视图层，开发者关注的只是m-v的映射关系
5、与AngularJS的对比：
Vue的很多api、特性都与angularJS相似，其实是因为Vue在开发的时候借鉴了很多AngularJS中的特点，而AngularJS中固有的缺点，在Vue中已经解决，也就是青出于蓝而胜于蓝，Vue的学习成本比AngularJS低很多，因为复杂性就低；
AngularJS是强主张的，而Vue更灵活；
Vue的数据流是单向的，数据流行更清晰；
Angular里指令可以是操作dom的，也可以封装一段结构逻辑代码，例如：广告展示模块；
Vue中的指令只是操作dom的，用组件来分离结构逻辑；
AngularJS的性能比不上Vue；
二、vue的使用
1、Vue不支持IE8，因为使用了ES5的很多特性；
2、可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，并且有很多提示，而生产版本全部删掉了；
3、在Vue中提供了一个脚手架（命令行工具）可以帮我们快速的搭建基于webpack的开发环境；
三、vue的实例
1、每一个应用都有一个根实例，在根实例里我们通过组件嵌套来实现大型的应用；也就是说组件不一定是必须的，但是实例是必须要有的；
2、在实例化实例的时候我们可以传入一个；配置项，在配置项中设置很多属性方法可以实现复杂的功能；
3、在配置中可以设置el的属性，el属性代表的是此实例的作用范围；
4、在配置中同过设置data属性来为实例绑定数据；
5、创建实例：var vm = new Vue({
el:'#app',
data:{ data }
})
注意：为什么data属性用函数return的形式比对象属性的创建方式好？
为了让每一个组件实例都拥有独立的数据
四、v-for
在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,还可以循环键值对，第一个参数是value，第二个是key，第三个依然是索引
五、v-on
1、在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里可以执行一些简单javascript表达式：++ -- = ...
2、可以将一些方法设置在methods里，这样就可以在v-on:click的值里直接写方法名字可以，默认会在方法中传入事件对象，当写方法的时候加了()就可以传参，这个时候如果需要事件对象，那就主动传入$event；
3、v-on绑定的事件可以是任意事件,v-on:可以缩写为@；
4、v-on的好处：
1、扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2、因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3、当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
五、模板语法
1、在vue中，我们使用mustache插值({{}})来将数据渲染在模板中
2、使用v-once指令可以控制只能插入一次值，当数据变化的时候，模板对应的视图不更新
3、使用v-html指令可以解析html格式的数据；
4、在html标签属性里不能使用mustache插值，这个时候给元素添加动态属性的时候使用v-bind来绑定属性，可以缩写成:
5、在使用v-bind绑定class和内联样式的时候，vue做了一些优化，可以使用对象语法和数组的语法来控制；
6、防止表达式闪烁：
v-cloak：给模板内的元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了，所以我们可以给这个属性设置css样式为隐藏；
<style>
[v-cloak]{
visibility: hidden;
}
</style>
v-text/v-html：
v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据，也可以用于防止闪烁
v-html可以解析标签，更改元素的innerHTML，性能比v-text较差
v-pre：
跳过元素和其子元素的编译过程，可以用来显示mustache
六、计算属性、监听
1、有的时候我们需要在模板中使用数据a，这个时候就需要用到表达式，但是有的地方我们需要对a数据进行一些简单的处理后才能使用，那么我们就会在表达式中写一些js逻辑运算
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
这样我们的维护就会非常困难，也不便于阅读
那么我们就可以在methods里设置一个方法，在模板的表达式中使用这个方法：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
但是这个时候，只要vm中有数据变化，这个变化的数据可能和我们关注的数据无关，但是vm都会重新渲染模板，这个时候表达式中的方法就会重新执行，大大的影响性能
这个时候其实我们可以使用监听器里完成：
在vm实例中设置watch属性，在里面通过键值对来设置一些监听，键名为数据名，值可以是一个函数，这个函数在数据改变之后才会执行，两个参数分别是性格前的值和更改后的值
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
}
值还可以是一个方法名字，当数据改变的时候这个方法会执行
当数据为object的时候，object的键值对改变不会被监听到（数组的push等方法可以）,这个时候需要设置深度监听：
c: {
deep:true,
handler:function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
}
}
监听的handler函数前面的这几种写法都是在数据变化的时候才会执行，初始化的时候不会执行，但是如果设置immediate为true就可以了
num:{
immediate:true,
handler:function(val){
this.nums = val*2
}
}
我们在回到上面的问题，用监听器加上immediate属性就可以做到该效果，但是大家可以看到的是逻辑稍稍有点复杂
watch还可以通过实例对象直接使用:vm.$watch，返回一个取消监听的函数，这个函数执行之后会取消监听
我们一般都会用到一个叫计算属性的东西来解决：
计算属性就是在实例配置项中通过computed来为vm设置一个新的数据，而这个新数据会拥有一个依赖（一条已经存在的数据），当依赖发送变化的时候，新数据也会发送变化
与方法的方式相比，它性能更高，计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
与watch相比，写起来简单，逻辑性更清晰，watch一般多用于，根据数据的变化而执行某些动作，而至于这些动作是在干什么其实无所谓，而计算属性更有针对性，根据数据变化而更改另一个数据
计算属性也拥有getter和setter，默认写的是getter，设置setter执行可以当此计算属性数据更改的时候去做其他的一些事情，相当于watch这个计算属性
xm:{
get:function(){//getter 当依赖改变后设置值的时候
return this.xing+'丶'+this.ming
},
set:function(val){//setter 当自身改变后执行
this.xing = val.split('丶')[0]
this.ming = val.split('丶')[1]
}
}
七、过滤器
1、vue中可以设置filter(过滤器)来实现数据格式化，双花括号插值和 v-bind 表达式中使用
2、vue1.0的有默认的过滤器，但是在2.0的时候全部给去掉了；所以在vue中如果想要使用过滤器就需要自定义
3、自定义的方法有两种：全局定义和局部定义，全局定义的过滤器在任意的实例、组件中都可以使用，局部定义就是在实例、组件中定义，只能在这个实例或组件中使用
全局定义：
Vue.filter(name,handler)
name是过滤器的名字，handler是数据格式化处理函数，接收的第一个参数就是要处理的数据，返回什么数据，格式化的结果就是什么
在模板中通过 | (管道符) 来使用,在过滤器名字后面加（）来传参，参数会在handler函数中第二个及后面的形参来接收
<p>{{msg | firstUpper(3,2)}}</p>
Vue.filter('firstUpper',function (value,num=1,num2) {
console.log(num2)
return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
})
局部定义：
在实例、组件的配置项中设置 filters，键名为过滤器名，值为handler
filters:{
firstUpper:function (value,num=1,num2) {
console.log(num2)
return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
}
}
注意：过滤器只能在mustache插值、v-bind里使用，其他的指令等地方都不能用
八、条件渲染
1、在Vue中可以使用v-if来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏
2、v-if控制的是是否渲染这个节点
3、当我们需要控制一组元素显示隐藏的时候，可以用template标签将其包裹，将指令设置在template上，等等vm渲染这一组元素的时候，不会渲染template
4、当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着
5、还有v-else-if指令可以实现多分支逻辑
6、需要注意的另一个地方是：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样确实能使Vue变得更快，性能更高，但是有的时候我们需要让实例去更新dom而不是复用，就需要给dom加上不同的key属性，因为vue在判断到底渲染什么的时候，包括哪些dom可以复用，都会参考key值，如果dom表现基本一致，符合复用的条件，但是key值不同，依然不会复用
7、Vue还提供了v-show指令，用法和v-if基本一样，控制的是元素的css中display属性，从而控制元素的显示和隐藏 ， 不能和v-else配合使用,且不能使用在template标签上，因为template不会渲染，再更改它的css属性也不会渲染，不会生效
8、v-if vs v-show：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
九、mixin
1、在Vue中，我们可以通过定义多个mixin来实现代码抽离复用，便于维护，提升页面的逻辑性
2、要注意的是：data属性不要使用mixin，因为从逻辑上来说，每一个实例、组件的数据都应该是独立的
3、一个mixin其实就是一个纯粹的对象，上面挂载着抽离出来的配置，在某一个实例中，通过mixins选项（数组）导入后，此实例就拥有导入的mixin的配置
4、且导入的配置不会覆盖原有的，而是合并到一起
5、简单来说mixin就是一个公共的方法；不同的组件都可以调用
十、虚拟dom
1、频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法
2、虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想
3、提供一种方便的工具，使得开发效率得到保证；保证最小化的DOM操作，使得执行效率得到保证
4、虚拟dom的框架/工具都是这么做的：
根据现有的真实dom来生成一个完整的虚拟dom树结构；
当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom；
拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法），。得到需要更新的地方之后，更新内容；
5、这样的话，就能大量减少真实dom的操作,提高性能
十一、组件化
1、模块化就是将系统功能分离成独立的功能部分的方法，一般指的是单个的某一种东西，例如js、css
2、组件化针对的是页面中的整个完整的功能模块划分，组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
3、优点：代码复用，便于维护
4、划分组件的原则：具有大量的布局结构的，或者是独立的逻辑的，都应该分成组件
5、组件应该拥有的特性：可组合，可重用，可测试，可维护
十二、组件
1、在vue中，我们通过Vue.extend来创建Vue的子类，这个东西其实就是组件；Vue实例和组件的实例有差别但是差别不带，因为毕竟一个是父类一个是子类
2、一般的应用，会拥有一个根实例，在根实例里面都是一个一个的组件
3、组件是要嵌入到实例或者父组件里的，也就是说，组件可以互相嵌套，而且，所有的组件最外层必须有一个根实例，所以组件分为：全局组件和局部组件
4、全局组件在任意的实例、父级组件中都能使用，局部组件只能在创建自己的父级组件或者实例中使用
5、组件通过不同的注册方法成为全局、局部组件
6、创建组件：Vue.extend(options)
7、全局注册：
var App = Vue.extend({
template:"<h1>hello world</h1>"
})
Vue.component('my-app',App)
简便写法：
// 创建组件构造器和注册组件合并一起
Vue.component('hello',{//Vue会自动的将此对象给Vue.extend
template:"<h1>hello</h1>"
})
组件通过template来确定自己的模板,template里的模板必须有根节点，标签必须闭合
组件的属性挂载通过：data方法来返回一个对象作为组件的属性，这样做的目的是为了每一个组件实例都拥有独立的data属性
8、局部注册：
new Vue({
el:"#app",
components:{
'my-app':App
}
})
简便写法：
data:{},
components:{
'hello':{
template:"<h1>asdasdasdasdasdas</h1>"
}
}
在实例或者组件中注册另一个组件，这个时候，被注册的组件只能在注册它的实例或组件的模板中使用，一个组件可以被多个组件或实例注册
十三、注意浏览器规则
因为vue在解析模板的时候会根据某些html的规则，例如，在table里只能放tr,td,th..，如果放入组件不会解析 这个时候我们可以放入tr使用is方式来标识这个tr其实是组件
<table id="app">
<tr is="hello"></tr>
</table>
十四、template
我们可以在html的某个地方通过template标签来定义组件的模板，在组件的template属性中通过选择器指定对应的template标签内容就可以了,注意，需要给template标签加id来指定
<template id="my-hello">
<div>
<h1>hello world</h1>
<p>hahahah</p>
</div>
</template>
//组件中
template:"#my-hello"
十五、is切换
在实例、组件的模板中的某一个标签上，可以通过is属性来指定为另一个目标的组件，这个时候我们一般会使用component标签来占位、设置is属性来指定目标组件
<component :is="type"></component>
//组件中
data:{
type:'aaa'
},
components:{
'aaa':{template:"<h1>AAAAAAAAAAAAA</h1>"},
'bbb':{template:"<h1>BBBBBBBBBBBBB</h1>"}
}
十六、组件嵌套
组件实例的作用域是孤立的,父组件不能直接使用子组件的数据，子组件也不能直接使用父组件的数据
父组件在模板中使用子组件的时候可以给子组件传递数据
<bbb money="2"></bbb>
子组件需要通过props属性来接收后才能使用
'bbb':{
props:['money']
}
如果父组件传递属性给子组件的时候键名有'-'，子组件接收的时候写成小驼峰的模式
<bbb clothes-logo='amani' clothes-price="16.58"></bbb>
props:['clothesLogo','clothesPrice']
我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件
十七、单向数据流
1、Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
2、另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
3、在两种情况下，我们很容易忍不住想去修改 prop 中数据：
Prop 作为初始值传入后，子组件想把它当作局部数据来用；
Prop 作为原始数据传入，由子组件处理成其它数据输出。
对这两种情况，正确的应对方式是：
1、定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
2、定义一个计算属性，处理 prop 的值并返回：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意：在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
十八、prop验证
1、我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用
2、验证主要分为：类型验证、必传验证、默认值设置、自定义验证
3、props:{
//类型验证:
str:String,
strs:[String,Number],
//必传验证
num:{
type:Number,
required:true
},
//默认数据
bool:{
type:Boolean,
// default:true,
default:function(){
return true
}
},
//自定义验证函数
nums:{
type:Number,
validator: function (value) {
return value %2 == 0
}
}
}
当父组件传递数据给子组件的时候，子组件不接收，这个数据就会挂载在子组件的模板的根节点上
十九、slot
1、vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现
2、匿名插槽：
在父组件中使用子组件的时候，在子组件标签内部写的内容，在子组件的模板中可以通过<slot></slot>来使用
3、具名插槽
父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过通过使用带有name属性的slot标签来放置对应的slot，当slot不存在的时候，slot标签内写的内容就出现
二十、transition
1、Vue提供了transition组件来帮助我们实现过渡效果，依据就是在控制元素显示隐藏的时候为dom在指定的时刻添加上对应的类名；而我们只要在这些类名里写上对应的css样式
2、在进入/离开的过渡中，会有 6 个 class 切换(v代表的是transition的name属性的值)。
v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。
如果有多个元素需要用transition-group包裹，并且需要有key值做标记
animate.css:
引入animate.css之后，按照下面的写法：
<transition leave-active-class="animated fadeOut" enter-active-class="animated slideInLeft">
<p v-if="isShow" class="box"></p>
</transition>
二十一、渲染函数和jsx
在vue中我们可以不用template来指定组件的模板，而是用render函数来创建虚拟dom结构，用这种方法优点就是性能高，缺点就是使用成本高，代码可读性较低，可以使用jsx来在render函数中创建，这样既提高了性能，又减少了成本
但是，我们在使用了vue-cli脚手架之后，因为脚手架中有对template标签转换虚拟dom的处理，所以，不需要使用jsx，我们也能高效的转换为createElement形式
二十二、Vue里组件的通信
1、通信：传参、控制、数据共享（A操控B做一个事件）
2、模式：父子组件间、非父子组件
3、父组件可以将一条数据传递给子组件，这条数据可以是动态的，父组件的数据更改的时候，子组件接收的也会变化
子组件被动的接收父组件的数据,子组件不要再更改这条数据了
4、父组件如果将一个引用类型的动态数据传递给子组价的时候，数据会变成双向控制的，子组件改数据的时候父组件也能接收到数据变化,因为子组件改的时候不是在改数据，而是在改数据里的内容，也就是说引用类型数据的地址始终没有变化，不算改父组件数据
父子间数据共享（双向控制）
5、父组件可以将一个方法传递给子组件，子组件调用这个方法的时候，就可以给父组件传递数据
父组件被动的接收子组件的数据
6、父组件可以将一个事件绑定在子组件的身上，这个事件的处理程序是父组件某一个方法，当子组件触发自己的这个被绑定的事件的时候，相当于触发了父组件的方法
父组件被动的接收子组件的数据
7、在组件间可以用过ref形成ref链，组件还拥有一个关系链（$parent,$children,$root）,通过这两种链；理论来说，任意的两个组件都可以互相访问，互相进行通信
任意组件通信，用的少...
8、event bus 事件总线 小天使 专注于非父子组件的通信，其实父子组件也可以使用，只是没有必要
在B组件的某个钩子函数为event_bus绑定一个事件，事件的处理程序是B想做的事情
在A组件的某一个操作里，触发event_bus绑定的事件
9、大量组件间数据共享的时候 vuex
二十三、组件的生命周期
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁
1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载ね，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
2、挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
3、接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
4、接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
5、当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
6、 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
7、当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
8、组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以
二十四、vue-cli脚手架
1、现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建vue的开发环境，一般情况下我们使用webpack来搭建，在这里我们直接使用vue官方提供的，基于webpack的脚手架工具：vue-cli
2、安装方法：
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
//init之后可以定义模板的类型
# 安装依赖，走你
cd my-project
npm install
npm run dev
3、模板类型：
simple 对应的是一个超级简单的html文件
webpack 在配置的时候可以选择是否需要vue-router
注意的是，模板创建的时候会询问使用需要使用ESLINT来标准化我们的代码
在脚手架中，开发目录是src文件夹，build负责打包的，config是负责配置（内置服务器的端口、proxy代理），static是静态目录，test是测试
src中main.js是入口文件，在里面创建了一个根实例，根实例的模板就是根组件App的模板，其他的组件都在根组件里面进行嵌套实现。
每一个组件都是一个单文件组件，这种文件会被webpack利用vue-loader的工具进行编译
template部分负责写组件的模板内容，script中创建组件。style里写组件的样式
assets目录也是静态目录，在这个目标中的文件我们使用相对路径引入,而static目录中的文件使用绝对地址来引入
在style上添加scoped能使这个style里的样式只作用于当前的组件，不加scoped就是全局样式
习惯于在App.vue根组件的style里写全局样式，而每个组件的style最好都是局部的
4、配置sass编译环境
vue-cli没有内置sass编译，我们需要自己修改配置
下载对应工具：node-sass sass-loader
在build目录下的webpack.base.conf.js中的module.rule里添加如下配置：
{
test: /.scss$/,
loader:'style-loader!css-loader!sass-loader'
}
5、在需要使用scss代码的组件的style标签中添加 lang='scss'
二十五、vue-router
1、现在的应用都流行SPA应用（single page application）
2、传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候受网络、性能影响，浏览器会出现不定时间的空白界面，用户体验不好
3、单页面应用就是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。
4、Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）
二十六、简单路由实现：
1、引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
2、创建router路由器
new Router(options)
3、创建路由表并配置在路由器中
var routes = [
{path,component}//path为路径，component为路径对应的路由组件
]
new Router({
routes
})
4、在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this.$route来使用路由的相关功能api
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
5、利用router-view来指定路由切换的位置
6、使用router-link来创建切换的工具，会渲染成a标签，添加to属性来设置要更改的path信息，且会根据当前路由的变化为a标签添加对应的router-link-active类名
<router-link to="main">main</router-link>
<router-link to="news">news</router-link>
.router-link-active{
color:red;
}
二十七、多级路由:
1、在创建路由表的时候，可以为每一个路由对象创建children属性，值为数组，在这个里面又可以配置一些路由对象来使用多级路由，注意：一级路由path前加'/'
const routes = [
{path:'/main',component:AppMain},
{path:'/news',component:AppNews,children:[
{path:'inside',component:AppNewsInside},
{path:'outside',component:AppNewsOutside}
]},
]
二级路由组件的切换位置依然由router-view来指定（指定在父级路由组件的模板中）
<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>
<router-view></router-view>
二十八、默认路由和重定向：
1、当我们进入应用，默认像显示某一个路由组件，或者当我们进入某一级路由组件的时候想默认显示其某一个子路由组件，我们可以配置默认路由：
{path:'',component:'/main'}
2、当我们需要进入之后进行重定向到其他路由的时候，或者当url与路由表不匹配的时候：
{path:'',redirect:'/main'}
///...放在最下面
{path:'**',redirect:'/main'},
二十九、命名路由
我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径了
三十、动态路由匹配
1、有的时候我们需要在路由跳转的时候跟上参数，路由传参的参数主要有两种：路径参数、queryString参数
2、路由参数需要在路由表里设置：
{path:'/user/:id',component:User}
上面的代码就是给User路由配置接收id的参数，多个参数继续在后面设置
3、在组件中可以通过this.$route.params来使用
4、queryString参数不需要在路由表设置接收，直接设置？后面的内容，在路由组件中通过this.$route.query接收
三十一、router-link
1、<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
2、router-link的to属性，默认写的是path（路由的路径），可以通过设置一个对象，来匹配更多
:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'
name是要跳转的路由的名字，也可以写path来指定路径，但是用path的时候就不能使用params传参，params是传路径参数，query传queryString参数
replace属性可以控制router-link的跳转不被记录
active-class属性可以控制路径切换的时候对应的router-link渲染的dom添加的类名
三十二、编程式导航
1、有的时候需要在跳转前进行一些动作，router-link直接跳转，需要在方法里使用$router的方法
router.push = router-link:to
router.replace = router-link:to.replace
router.go() = window.history.go
三十三、路由模式
路由有两种模式：hash、history，默认会使用hash模式，但是如果url里不想出现丑陋hash值，在new VueRouter的时候配置mode值为history来改变路由模式，本质使用H5的histroy.pushState方法来更改url，不会引起刷新，但是需要后端进行路由的配置
三十四、路由钩子
1、在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化
2、全局路由钩子：
router.beforeEach((to, from, next) => {
//会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
console.log('beforeEach')
console.log(to,from)
next()
})
router.afterEach((to, from) => {
//会在任意路由跳转后执行
console.log('afterEach')
})
3、单个路由钩子：
只有beforeEnter，在进入前执行，to参数就是当前路由
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
}
}
]
4、路由组件钩子：
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
三十五、命名视图
1、有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,//默认的，没有name的router-view
a: Bar,
b: Baz
}
}
]
})
三十六、prop将路由与组件解耦
在组件中接收路由参数需要this.$route.params.id,代码冗余，现在可以在路由表里配置props：true
{path:'detail/:id',component:AppNewsDetail,name:'detail',props:true}
在路由自己中可以通过props接收id参数去使用了
props:['id']
三十七、响应式原理
因为vue是mvvm的框架，所以当数据变化的时候，视图会立即更新，视图层产生操作后会自动通知vm来更改model，所以我们可以实现双向数据绑定，而其中的原理就是实例会将设置的data逐个遍历利用Object.defineProperty给数据生成getter和setter，当数据变化地方时候setter会监听到并且通知对应的watcher工具进行逻辑运算会更新视图
三十八、声明式渲染
在vue中，我们可以先在vue实例中声明数据，然后通过{{}}等方式渲染在dom中
三十九、进入域后根据不同的情况显示不同的页面（PC/MOBILE）
很多情况下，一个应用会有PC和移动端两个版本，而这两个版本因为差别大，内容多，所以不能用响应式开发但是单独开发，而域名只有一个，用户进入域后直接返回对应设备的应用，做法主要有两种：
1.、前端判断并跳转
进入一个应用或者一个空白页面后，通过navigator.userAgent来判断用户访问的设备类型，进行跳转
2、后端判断并响应对应的应用
用户地址栏进入域的时候，服务器能接收到请求头上包含的userAgent信息，判断之后返回对应应用