Vue使用：
第一步：全局安装@vue/cli
npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建该项目：vue create xxx
第三步：启动项目：npm run serve
备注：
1、如出现下载缓慢请配置npm淘宝镜像：
npm config set registry https://registry.npm.taobao.org
2、Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行：vue.inspect > output.js
3、使用vue.config.js可以对vue的配置项进行修改，详情见：https://cli.vuejs.org/zh/config/
关于不同版本的Vue:
1、vue.js与vue.runtime.xxx.js的区别：
1）vue.js是完整版的Vue，包含：核心功能+模板解析器
2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器
2、因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
vue. config. productionTip = false
阻止在vue启动时生成生产提示；
推荐在VSCode中安装vetur插件，安装之后使用default短语就可以快速生成一个页面的框架；
初识vue:
1、想让vue工作，就必须创建一个vue实例，且要传入一个配置对象；
2、容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法；
3、容器里的代码被称为Vue模板；
4、Vue实例和容器是一一对应的；
5、真实开发中只有一个vue实例，并且会配合着组件一起使用；
6、{ {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
vue模板语法有2大类：
1、插值语法：
功能：用于解析标签体内容
写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2、指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件）
vue中有2种数据绑定的方式：
1、单向绑定（v-bind）:数据只能从data流向页面
2、双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data
备注：
1、双向绑定一般都应用在表单类元素上，如：input\select等
2、v-model:value可以简写为v-model,因为v-model默认收集的就是value值
data和el的两种写法：
1、el有两种写法：
1）new Vue时候配置el属性
2）先创建Vue实例，随后再通过vm.$mount（）指定el的值
2、data有2种写法
1）对象式，在html中引入vue,两种方式都可以使用
2）函数式，组件中必须使用函数式，函数return出来的数据不会造成调用的全局污染
3、一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了
MVVM模型：
1、M :model 模型：data中的数据
2、V:view 视图 ：模板代码
3、VM: view-model 视图代码 ：VUe实例
备注：
1、data中所有的属性，最后都出现在了vm身上
2、vm身上所有的属性以及vue原型上所有属性，在vue模板中都可以直接使用
Object.defineProperty
object.defineProperty(对象名，对象属性，配置项{
value：值
enumerable:true//控制属性是否可以枚举，默认值为false
writable:true//控制属性是否可以被修改
configurable:true//控制属性是否可以被删除
//当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
get(){}
//当有人修改person的age属性时，set函数（setter）就会被调用，且会受到具体的值
set(value){
}
})数据代理：
1、vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2、vue中数据代理的好处：
更加方便的操作data中的数据
3、基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在getter/setter内部去操作（读/写）data中对应的属性
事件的基本使用：
1、使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
2、事件的回调需要配置在methods对象中，最终会在vm上；
3、methods中配置的函数，不要用箭头函数，否则this就不是vm了；
4、methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象；
5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参；
事件修饰符：
1、prevent:阻止默认事件（常用）
2、stop:阻止事件冒泡（常用）
3、once：事件只触发一次（常用）
4、capture:使用事件的捕获模式；
5、self:只有event.target是当前操作的元素时才触发事件
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
vue中常用的按键别名：
1、回车 => enter
2、删除 => delete(捕获“删除”和“退格”键)
3、退出 =>esc
4、空格 =>space
5、换行 =>tab(特殊，必须配合keydown去使用)
6、上 =>up
7、下 =>down
8、左= >left
9、右 =>right
10、vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名法)
11、系统修饰键（用法特殊）：ctrl\alt\shift\meta
1)配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
2）配合keydown使用：正常触发事件
12、也可以使用keyCode去指定具体的按键（不推荐）
13、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
计算属性：
1、定义：要用的属性不存在，要提供已有的属性计算得来（计算属性是将get函数返回的数据直接放在vm上的，因此返回的是数据，调用的时候也是按照属性的方式使用的；计算属性在不使用set方法时可以直接简写为一个函数）
2、原理：底层借助了object.defineproperty方法提供的getter和setter
3、get函数什么时候执行？
1）初次读取时会执行一次
2）当依赖的数据发生改变时会被再次调用
4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5、备注：
1）计算属性最终会出现在vm上，直接读取使用即可
2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
监视属性watch:
(当监视对象配置只有handler函数时，可以直接简写以为配置对象命名的函数)
1、当被监视的属性变化时，回调函数自动调用，进行相关操作
2、监视的属性必须存在，才能进行监视
3、监视的两种写法：
1）new vue时传入watch配置
2）通过vm.$watch监视
watch:{
监视对象：{
immediate:true//初始化的时候就执行handler;
//一般情况下是当监视对象改变时执行handler;
handler(newValue,oldValue){
处理函数
}
}
}深度监视：
1、vue中的watch默认不监测对象内部值的改变（一层）
2、配置deep:true可以监测对象内部值改变（多层）
备注：
1、vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
2、使用watch时根据数据的具体结构，决定是否才有深度监视
computed和watch之间的区别：
1、computed能完成的功能，watch都可以完成
2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
1、所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2、所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象
绑定样式：
1、class样式：
写法：:class="xxx",xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取；
对象写法使用于：要绑定多个样式，个数不确定，名字也不确定；
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2、style样式：
：style="{fontSize:xxx}"其中xxx是动态值；
：style="[a,b]",其中a、b是样式对象
条件渲染：
1、v-if写法：
1）v-if="表达式"
2）v-else-if="表达式"
3）v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if 、v-else一起使用，但要求结构不能被打断
2、v-show写法：
v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3、备注：
使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到
template元素可以包裹元素，但不改变元素结构，经常和v-if一起使用，但是不能和v-show一起使用
v-for指令：
1、用于展示列表数据
2、语法：v-for="(item,index) in xxx"
:key="yyy"
3、可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
面试题：react、vue中的key有什么作用？（key的内部原理是什么？）
1、虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，vue会根据新数据生成新虚拟DOM
随后VUE进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：
2、对比规则：
1）旧虚拟DOM中找到了与新虚拟DOM相同的key:
若虚拟DOM中内容没变，直接使用之前的真实DOM;若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
2)旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到页面
3、用index作为key可能会引发的问题：
1）若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新，界面效果没有问题，但效率低
2）如果结构中还包含输入类的DOM，会产生错误DOM更新，界面有问题
4、开发中如何选择key
1）最好使用每条数据的唯一标识符作为key，比如id、手机号、身份证号、学号等唯一值
2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
vue数据监测：
1、vue会监视data中所有层次的数据
2、如何监测对象中的数据？
通过setter实现监控，且要在new Vue时就传入要监测的数据
1）对象中后追加的属性，VUE默认不做响应式处理
2）如需给后添加的属性做响应式，请使用以下API:
Vue.set(target , propertyName/index ,value)或
vm.$set(target , propertyName/index , value)
3、如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
1）调用原生对应的方法对数组进行更新
2）重新解析模板，进而更新页面
4、在Vue修改数组中的某个元素一定要用以下方法：
1）使用这些API:push()\pop()\shift()\unshift()\splice()\
sort()\reserve()
2)Vue.set()或vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性
收集表单数据：
若<input type = "text"/>，则v-model收集的是value值，用户输入的就是value值
若<input type = "radio"/>，则v-model收集的是value指，且要给标签配置value值
若<input type = "checkbox">
1)没有配置input的value属性，那么收集的就是checked（勾选或未勾选是布尔值）
2）配置input的value属性：
若v-model的初始值是非数组，那么收集的就是checked(勾选或未勾选是布尔值);
若v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑的处理）
语法：
1、注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
2、使用过滤器：{ { xxx | 过滤器名字}} 或
v-bind ：属性 = “xxx | 过滤器名”
备注：1、过滤器也可以接收额外参数、多个过滤器也可以串联
2、并没有改变原本的数据，是产生新的对应的数据
内置指令：
v-bind :单向绑定解析表达式，可以简写为 :xxx
v-model :双向数据绑定
v-for :遍历数组/对象/字符串
v-on :绑定事件监听，可简写为@
v-if :条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-text：
1、作用：向其所在的节点渲染文本内容
2、与插值语法的区别：v-text会替换掉节点中的内容，{ {xxx}}则不会
v-html:
1、作用：向指定节点中渲染包含html结构的内容
2、与插值语法的区别：
1）v-html会替换掉节点中的内容，{ {xxx}}则不会
2）v-html可以识别html结构
3、严重注意：v-html有安全性问题
1）在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上
v-cloak:(没有值)
1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2、使用css配合v-cloak可以解决网速慢时页面展示出{ {xxx}}的问题
v-once
1、v-once所在节点在初次动态渲染后，就视为静态内容了
2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre:
1、跳过其所在节点的编译过程
2、可利用她跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
自定义指令总结：
1、定义语法：
1）局部指令：
new Vue({
directives:{指令名：配置对象}
})
或
new Vue({
directives(){}
})2)全局指令：
Vue.directive(指令名，配置对象) 或
Vue.directive(指令名，回调函数)2、配置对象中常用的3个回调函数：
1）.bind:指令与元素成功绑定时调用
2）.inserted:指令所在元素被插入页面时调用
3）.updated:指令所在模板结构被重新解析时调用
3、备注：
1）指令定义时不加v-,但使用时要加v-
2)指令名如果是多个单词，要使用kebab-case命名方式，不要使用camelCase命名方式
生命周期：
1、又名：生命周期回调函数，生命周期函数，生命周期钩子
2、是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4、生命周期函数中的this指向是vm或组件实例对象
常用的生命周期钩子：
1、mounted:发送ajax请求、启动定时器、绑定自定义时间，订阅消息等初始化操作
2、beforeDestroy:清楚定时器、解绑自定义事件、取消订阅消息等收尾工作
关于销毁Vue实例
1、销毁后借助Vue开发工具看不到任何信息
2、销毁后自定义事件会失效，但原生DOM事件依然有效
3、一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
Vue中使用组件的三大步骤：
一、定义组件（创建组件）
二、注册组件
三、使用组件（写组件标签）
一、如何定义一个组件？
使用Vue.extend(option)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
区别如下：
1、el不要写，为什么？--最终所有组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
2、data必须写成函数，为什么?--避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构
二、如何注册组件？
1、局部注册：靠new Vue的时候传入components选项
2、全局注册：靠Vue.component('组件名'，组件)
三、编写组件标签：
<component/>
几个注意点：
1、关于组件名：
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：school
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool
(需要Vue脚手架支持)
备注：
1)组件名尽可能回避HTML中已有的元素名称，例如：h2\H2都不行
2）可以使用name配置项指定组件在开发者工具中呈现的名字
2、关于组件标签：
第一种写法：<school></school>
第二种写法：<school/>
备注：不使用脚手架时，<school/>会导致后续组件不能渲染
3、一个简写方式：
const school = Vue.extend(options) 可简写为：
const school = options
关于VueComponent:
1、school组件本质是一个名为VueComponnet的构造函数，且不是程序员定义的，是Vue.extend生成的
2、我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的new VueComponent(options)
3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
4、关于this指向：
1）组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是VueComponent实例对象
2）new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是Vue实例对象
5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
Vue的实例对象，以后简称为vm
重要：
1、一个重要的内置关系：VueComponnet.prototype.__proto__ ===Vue.prototype
2、为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
ref属性：
1、被用来给元素或子组件注册引用信息
（id的替代者）
2、应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3、使用方式：
打标识：<h1 ref ="xxx">...</h1>或
<School ref="..."></School>
获取：this.$refs.xxx
配置项props:
功能：让组件接收外部传过来的数据
1）传递数据：<Dome name="xxx"/>
2)接收数据：
第一种方式（只接收）：
props:['name']
第二种方式（限制类型）：
props:{
name:String
}
第三种方式(限制类型、限制必要性、指定默认值）：
props:{
name:{
type:String,//类型
requierd:true,//必要性
default:'老王'//默认值
}
}备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据；如果一个属性既有自己写的值，又有props传入的值，以props传入的值为准
mixin混入：
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：
{
data(){},
methods:{}
}
第二步使用混入，例如：
1）全部混入：Vue.mixin(xxx)
2)局部混入：mixins:['xxx']
插件：
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
定义插件：
对象.install = function(Vue ,options){
1、添加全局过滤器
Vue.filter(...)
2、添加全局指令
Vue.directive(...)
3、配置全局混入（合）
Vue.mixin(...)
4、添加实例方法：
Vue.prototype.$myMrthods = function(){...}
Vue.prototype.$myProperty = xxxx
}
使用插件：Vue.use()
scoped样式：
作用：让样式在局部生效，防止冲突
写法：<style scoped>
案例总结：
一、组件化编码流程（通用）
1、实现静态组件：抽取组件，使用组件实现静态页面效果（组件要按照功能点拆分，命名不要和html元素冲突）
2、展示动态数据：
2.1数据的类型、名称是什么？
2.2数据保存在哪个组件?
（实现动态组件：考虑好数据的存放位置，数据是在一个组件再用，还是一些组件在用：
1）一个组件在用：放在组件自身即可
2）一些组件在用：放在他们的共同父组件上（状态提升））
3、交互--从绑定事件监听开始
二、props适用于:
1、父组件 ===>子组件 通信
2、子组件 ===>父组件通信（要求父先给子一个函数）
三、注意：
1、使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的
2、props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但是不推荐这样做
WebStorage:
1、存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2、浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
3、相关API：
1）xxxStorage.setItem('key','value')
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
2）xxxStorage。getItem('person')
该方法接受一个键名作为参数，返回键名对应的值
3）xxxStorage.removeItem('key')
该方法接受一个键名作为参数，并把该键名从存储中删除
4）xxxStorage.clear():
该方法会清空存储中的所有数据
4、备注：
1）SessionStorage中存储的内容会随着浏览器窗口关闭而消息
2）LocalStorage存储的内容，需要手动清楚才会消失
3）xxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null
4)JSON.parse(null)的结果依然是null
组件的自定义事件：
1、一种组件间通信的方式，适用于：
子组件=>父组件
2、使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
3、绑定自定义事件：
1）第一种方式：在父组件中：<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>
2)第二种方式，在父组件：
<Demo ref="demo"/>
mouted(){
this.$refs.xxx.$on('atguigu',this.test)
}
3)若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
4、触发自定义事件：this.$emit('atguigu',数据)
5、解绑自定义事件this.$off('atguigu')
6、组件上也可以绑定原生DOM事件，需要使用native修饰符
7、注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么使用箭头函数，否则this指向会出问题
全局事件总线（GlobalEventBus）
1、一种组件间通信的方式，适用于任意组件间通信
2、安装全局事件总线：
new Vue({
beforeCreate(){
Vue.prototype.$bus = this
//安装全局事件总线，$bus就是当前应用的vm
}
})
3、使用事件总线：
1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
methods(){
demo(data){}
}
mouted(){
this.$bus.$on('xxx',this.demo)
}
2）提供数据：this.$bus.$emit('xxx',数据)
4、最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
消息订阅与发布（pubsub）
1、一种组件间通信的方式，适用于任意组件间通信
2、使用步骤：
1）安装pubsub:npm i pubsub-js
2)引入：import pubsub from 'pubsub-js'
3)接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
methods(){
demo(data){}
}
mounted(){
this.pid = pubsub.subscribe('xxx',this.demo)
//订阅消息
}
4）提供数据：pubsub.publish('xxx',数据)
5）最好在beforeDestroy钩子中，用pubsub.unscribe(pid)去取消订阅
nextTick
1、语法：this.$nextTick(回调函数)
2、作用：在下一次DOM更新结束后执行其指定的回调
3、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
vue封装的过渡与动画
1、作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
2、写法：
1）准备好样式：
元素进入的样式：
v-enter:进入的起点
v-enter-active:进入过程中
v-enter-to:进入的终点
元素离开的样式：
v-leave:离开的起点
v-leave-active:离开过程中
v-leave-to:离开的终点
2）使用<transition>包裹要过渡的元素，并配置name属性
<transtion name="hello">
<h1 v-show="isShow">你好啊</h1>
</transtion>
3)备注：若有多个元素需要过渡，则需要使用<transtion-group>，且每个元素都要指定key值
Vue脚手架配置代理：
方法一：在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
说明：
1、优点：配置简单，请求资源时直接发给前端（8080）即可
2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3、工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
方法二：编写vue.config.js配置具体代理规则
module.exports={
devServe:{
proxy:{
'/api1':{//匹配所有以'/api'开头的请求路径
target:'http://localhost:5000',
//代理目标的基础路径
changeOrigin:true,
//设置为true时，请求服务器会说谎，本身为8080，说谎为5000
pathRewrite:{'^/api1':''}
//重写路径，匹配以api1开头的路径，将api1替换为空字符串
ws:true
}
}
}
}说明：
1、优点：可以配置多个代理，且可以灵活的控制请求是否走代理
2、缺点：配置略微繁琐，请求资源时必须加前缀
插槽：
1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
2、分类：默认插槽、具名插槽、作用域插槽
3、使用方式：
1）默认插槽：
父组件中：
<Category>
<div>html结构</div>
</Category>
子组件中：
<template>
<div>
<slot>插槽默认内容</slot>
</div>
</template>
2）具名插槽：
父组件中：
<Category>
<template slot="center">
<div>html结构</div>
</template>
</Category>
子组件中：
<template>
<div>
<slot name="center">插槽默认内容</slot>
</div>
</template>
3)作用域插槽：
理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定（games数据在Category组件中，单但使用数据所遍历出来的结构由App组件来决定）
父组件中：
<Category>
<template scope>
<div>html结构</div>
</template>
</Category>
子组件中：
<template>
<div>
<slot :game="geme">插槽默认内容</slot>
</div>
</template>
VueX:
1、概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
2、何时使用：多个组件需要共享数据时
3、搭建Vuex环境：
1）创建store文件
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions对象--响应组件中用户的动作
const actions = {
//响应组件中加的动作
jia(context,value){
context.commit('JIA',value)
}
}
//准备Mutation对象--修改state中的数据
const mutations = {
JIA(state,value){
state.sum += value
}
}
//准备state对象--保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
2)在main.js中创建vm时传入store配置项
//引入store
import store from './store'
//创建vm
new Vue({
el:'#app',
render:h=>h(App),
store
})
备注：
组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名'，数据)或$store.commit('mutations中的方法名'，数据)
若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit
getters的使用：
1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
2、在store.js中追加getter配置
const getter = {
bigSum(state){
return state.sum*10
}
}
//创建并暴露store
export default new Vuex.Store({
getters
})
3、组件中读取数据：$store.getters.bigSum
四个map方法的使用:
1、mapState方法：用于帮助我们映射state中的数据为计算属性
computed:{
//借助mapState生成计算属性：sum\school(对象写法)
...mapState({sum:'sum',school:'school'})
//借助mapState生成计算属性：sum\school(数组写法)
...mapState(['sum','school'])
}
2、mapGetters
3、mapActions方法：用于帮助我们生成actions对话的方法：即：包含$store.dispatch(xxx)的函数
//靠mapActions生成：increamentOdd\incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd'},decrementWait:'jiaWait')
//数组形式
...mapActions(['jiaOdd','jiaWait'])
4、mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
methods:{
...mapMutations({incrementOdd:'jiaOdd'},decrementWait:'jiaWait')
//数组形式
...mapMutations(['jiaOdd','jiaWait'])
}
备注：mapActions与mapMutations使用时，若需要传递参数，需要在模板中绑定事件时传递好参数，否则参数是事件对象
模块化+命名空间：
让代码更好维护，让多种数据分类更加明确
1、修改store.js:
namespace:true//开启命名空间
2、开启命名空间后：
1）自己直接读取：
this.$store.state.personAbout.list
2)借助mapState读取：
...mapState('countAbout',['sum','scholl'])
路由：
一个路由就是一组映射关系，多个路由需要路由器进行管理；前端路由：key是路径，value是组件
基本使用：
1、安装vue-router:npm i vue-router
2、应用插件：vue.use(VueRouter)
3、编写router配置项
4、实现切换（active-class可配置样式展示）
5、指定展示位置：
<router-view></router-view>
注意：
1、路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2、通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3、每个组件都有自己的$route属性，里面存储着自己的路由信息
4、整个应用只有一个router，可以通过组件的$router属性获取到
5、多级路由，通过children配置子级路由，里面的路由地址千万不要写/；另外<router-link>跳转地址一定要写完整路径
路由的query参数：
1、传递参数
1）跳转并携带query参数，to的字符串写法：
<router-link :to="/home/meaasge/detail?id=999&title=你好">跳转<router-link>
2)跳转并携带query参数，to的对象写法：
<router-link :to="{
path:'/home/message/detail',
query:{
id:666,
title:‘你好’
}
}">跳转<router-link>
2、接收参数：
$route.query.id
$route.query.title
路由命名：
简化跳转名称
<router-link :to="{name:'hello'}">跳转<router-link>
路由的params参数：
1、配置路由，声明接收params参数：
path:'detail/:id/:title'使用占位符声明接收params参数
2、传递参数：
<router-link :to="/home/meaasge/detail/999/你好">跳转<router-link>
特别注意：路由携带params参数时，若使用to的写法，则不能使用path配置项，必须使用name配置
3、接收参数
$route.params.id
$route.params.title
路由的props配置：
作用：让路由组件更加方便的接收到参数
在router文件中：
第一种写法：props值为对象，改对象中所有的key-value的组合最终都会通过props传给Detail组件
props:{a:90}
第二种写法，props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
props:true
第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件：
props(route){
return{
id:route.query.id
}
}
router-link的replace属性：
1、作用：控制路由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式，分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
3、如何开启replace模式：<router-link replace ...></router-link>
编程式路由导航：
1、作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2、$router的API
this.$router.repace(
name:
params:{
id:xxx
}
)
this.$router.push（）
this.$router.forward()
this.$router.back()
this.$router.go()
缓存路由组件
1、作用：让不展示的路由组件保持挂载，不被销毁
2、缓存一个路由组件
<keep-alive include='news'>
<router-view></router-view>
</keep-alive>
缓存多个路由组件
<keep-alive :include="['news']">
<router-view></router-view>
</keep-alive>
两个新的生命周期钩子：
1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2、具体名字：
1）actived路由组件被激活时触发
2）deactived路由组件失活时触发
路由守卫：
1、作用：对路由进行权限控制
2、分类：全局守卫、独享守卫、
//全局路由守卫：
全局前置守卫，初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='haha'){//权限控制的规则
next()//放行
}else{
alert('暂无权限查看')
}
}else{
next()//放行
})
全局后置守卫，初始化时执行，每次路由切换后执行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title=to.meta.title//修改网页的title
}else{
document.title = 'vue_test'
}
})
//独享路由守卫：
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='haha'){//权限控制的规则
next()//放行
}else{
alert('暂无权限查看')
}
}else{
next()//放行
}
独享路由守卫在单独的路由里面进行配置，只有前置独享路由守卫，没有后置独享路由守卫
组件内守卫
//进入守卫，通过路由规则，进入该组件时被调用
beforeRouterEnter(to,from,next){}
//离开守卫，通过路由规则，离开该组件时被调用
beforeRouterLeave(to,from,next){}
路由器的两种工作模式：
1、对于一个url来说，什么是hash值？--#及其后面的内容就是hash值
2、hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3、hash模式：
1）地址永远带着#号，不美观
2）若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
3）兼容性比较好
4、history模式：
1）地址干净、美观
2）兼容性和hash模式相比略差
3）应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题