Vue
阻止Vue在启动时生成提示语句 Vue.config.productionTip=false;
创建Vue 语法：
new Vue({
el:'DOM查找'；
data:{
数据
}
})
el 用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串 data 用于储存数据，数据供el所指定的容器去使用，值我们写成一个对象
Vue模版语法
插值语法 插值语法，用于解析标签内容体 {{ }} 里面可写js表达式，且可以直接读取data中所有数据
指令语法 指令语法，用于解析标签（包括：标签属性，标签体内容，绑定事件等等） v-bind: 表示单向绑定数据，数据只能从data流向页面可以简写成冒号: v-model：双向绑定数据，数据不仅可以从data流向页面，还可以从页面流向data 注意：双向绑定一般用在表单类元素内，v-model:value可以简写成v-model因为v-model默认收集的是value值
data与el的两种写法
el的两种写法： 1.new Vue时候配置el属性 2. mount(字符选择器) 如：
const vm=new Vue()
vm.$mount(#id);
data的两种写法 1.对象式，data:{} 2.函数式： data:function(){return 对象式}或者直接写成data(){return 对象式} //注意：不能写成箭头函数因为箭头函数得this指向的不是Vue实例而是windos
Vue事件处理
函数的存放 methods methods是Vue实例中存放函数的地方，事件处理的函数一般也存放在这 语法：
const vm =new Vue({
el:'#root',
data:{...},
methods:
{
函数名(){函数体}，
...
}
vue事件绑定
v-on 绑定事件，可以简写成@ 语法：
v-on:click='触发事件函数()'
vue事件对象（$event） $event 代表的是绑定的事件的元素 当事件不需要传入参数时默认传入event参数，当事件需要传入参数时则需要在括号中添加$event 不需要传入参数如下：
//这里的fun函数和fun($event)是一样的 需要传入参数时如下：
//这里传入两个参数，一个是22，一个是$event
Vue事件修饰符
Vue事件修饰符语法：vue绑定事件.vue事件修饰符 1.prevent 阻止默认事件（常用） 2.stop 阻止冒泡事件（常用） 3.once 事件只触发一次（常用） 4.capture 使用事件的捕获模式 5.self 只有event.target是当前操作的元素时才触发事件 6.passive 事件的默认行为立即执行，无需等待事件回调执行完毕
Vue键盘事件
键盘事件.按键名 指定某个键触发事件 如：@keyup.enter 按下回车并松开触发 vue提供的按键别名如下： enter 回车 tab 换行 up 上 down 下 left 左 right 右
如果vue没有提供别名的按键名可以使用原始的按键名去绑定，但是注意有些按键是用两个单词拼凑的得用-连接两个单词并全部小写
也可以使用keyCode去指定具体内容（不推荐）
自定义按键别名 Vue.config.keyCodes.自定义按键名 = 键码 如：Vue.config.keyCoded.huiche=13//这里把回车的按键名定义为huiche（回车的码值是13）
Vue计算属性
computed Vue计算属性 语法： computed:{ key名:{ get(){...}, set(){...} } } get()与Object.defineProperty方法中的get一样 set()与Object.defineProperty方法中的set一样
计算属性： 1.定义：要用的属性不存在，要通过已有属性计算得来 2.原理：底层借助了Object.defineproperty方法提供的get和set 3.get在初次读取时会执行一次之后只有当依赖的数据发生改变时会被再次调用 4.与methods相比内部有缓存机制，效率更高，调用方便。
Vue监听属性
watch 监听属性 语法：
watch:{
要监听的数据:{
监听属性方法
}
}
监听属性方法： handler(newValue,oldValue) 当监听的数据发生改变时调用 newValue表示被监听数据的新的数据 ， oldValue表示被监听数据的旧的数据
语法：
handler(newValue,oldValue){
要执行的语句;
}
immediate 初始化时是否让handler调用一下，默认为false 语法：immediate:true;//初始化调用handler
deep 深度监听，默认为false（不开启），true为开启 语法：deep:true 深度监听： （1）Vue中的watch默认监测对象内部值的改变（只监测一层） （2）配置deep:true可以监测对象内部值的变化（监测多层） 备注： （1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以 （2）使用watch时根据数据的具体结构来决定是否采用深度监听
监听属性的简写方式 监听属性只有在handler一个对象属性时且没有别的属性时可以简写 在vue实例内简写形式: 语法： watch:{ 要监听的属性(newValue,oldvalue){执行语句;} } 在vue实例外简写形式： 语法： 实例对象.$watch('要监听的属性'function(newValue,oldValue){执行语句;})
计算属性与监听属性对比 computed VS watch
computed和watch之间的区别
1.computed能完成的功能，wacth也能完成 2.wacth能完成的功能，computed不一定能完成。列如：watch可以进行异步操作 两个重要小原则 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象 2.所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
Vue class样式绑定
vueclass绑定使用指令语法单向绑定数据（v-bind:class）来绑定class，简写:class="要绑定的数据"
class绑定 绑定class样式--字符串写法，适用于：类名不确定，需要动态指定 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定不用 绑定class样式--数组用法，适用于：要绑定的样式个数不确定，名字也不确定
Vue style绑定
:style="{fontSize: xxx}"其中xxx是动态值 :style="[a,b]"其中a，b是样式对象
Vue条件渲染
条件渲染：
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标签
语法： template标签不会影响到内部结构，template在被浏览器渲染时会脱掉template标签之下里面的内容 template标签常用于条件渲染时使用
Vue 列表渲染
v-for指令
1.用于展示列表数据 2.语法：v-for="(item,index) in xxx" :key="yyy" 3.可遍历：数组，对象，字符串（用的少），指定次数（用的很少QA）
:key v-for下节点给每个节点命名id，:key默认是v-for下index值
数据监视原理
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(), sort(), splice(), reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象添加属性！！（如：data）
数据监视总结： 添加响应式数据用：Vue.set()或vm.$set() //注意不能给vm的根数据对象添加属性 添加响应式数组：push(), pop(), shift(), unshift(), sort(), splice(), reverse()
Vue 收集表单数据
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值 若：<input type="checkbox"/>
1.没有配置的input的value属性，哪么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置的input的value属性：
（1）v-model的初始值是非数组，哪么收集的就是checked（勾选 or 未勾选，是布尔值）
（2）v-model的初始值是数组，哪么收集的就是value组成的数组 备注：v-model的三个修饰符： lazy：失去焦点再收集数据 mumber：输入字符串转为有效的数字 trim：输入首尾空格过滤
Vue 过滤器
过滤器： 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）
语法： 1.注册过滤器：
（1） 全局过滤器：Vue.filter(过滤器并,{要执行的操作})
（2）局部过滤器：new Vue{fiters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性=“xxx”| 过滤器名
备注： 1.过滤器也可以接收额外参数，多个过滤器也可以串联 2.并没有改变原本的数据，是产生新的对应数据
3.全局过滤器一定要在new Vue实例之前定义
内置指令
以学过： v-bind: 单向绑定解析表达式，可简写成为：xxx v-model: 双向数据绑定 v-for：遍历数组、对象、字符串 v-on：绑定事件监听，可简写成为@ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-show：条件渲染（动态控制节点是否展示）
v-text指令:
1.作用：向其所在的节点中渲染文本内容 2.与插值语法区别：v-text会替换掉节点中的内容，{{xx}}则不会
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容
2.与插值语法区别：
（1）v-html会替换掉节点中所有的内容，{{xx}}则不会
（2）v-html可以识别html结构
3.严重注意：v-html有安全性问题
（1）在网站的动态渲染任意html是非常危险的，容易导致xss攻击
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上
v-cloak指令（没有值）：
1.本质是一种特使属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xx}}的问题
v-once指令（没有值）：
1.v-once所在的节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令（没有值）：
1.跳过所在节点的编译过程
2.可利用他跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
自定义指令
Vue支持自定义指令directive，自定义指令有两个参数：element和binding element：获取当前绑定的自定义指令元素节点 binding：获取自定义指令的语法 语法：
//函数写法
directives:{
"自定义指令名":function(element,binding){...}
}
使用方法
<h2>放大10倍的n是<span v-big="n"></span></h2>
directives:{
big(element,binding){
element.innerText = binding.value*10
}
}
除了上面的基本用法还有一种对象用法：
<input v-fdin="n">
directives:{
fdin:{
//指令与模板绑定成功时执行
bind(element,binding){
element.value=binding.value
element.focus()
},
//指令所在元素被插入页面时执行
inserted(element,binding){
element.focus()
},
//指令所在模板被重新解析时执行
update(element,binding){
element.value=binding.value
element.focus()
}
}
}
vue生命周期
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：vue关机时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改。但函数具体内容时程序员根据需求编写的 4.生命周期函数中的this指向是vm或组件实例对象
vm的生命周期表：
创建完毕===>调用created函数
将要挂载===>调用deforeMount函数
(重要)挂载完毕===>调用mounted函数
将要更新===>调用beforeUpdate函数
更新完毕===>调用updated函数
(重要)将要销毁===>调用beforeDestroy函数
销毁完毕===>调用destroyed函数
常用的生命周期钩子：
mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例 1.销毁后借助Vue开发者工具看不到任何信息 2.销毁后自定义事件会失效，但原生dom事件依然有效 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
Vue组件
Vue使用组件的三大步骤
1、定义组件（创建组件）
2、注册组件
3、使用组件（写组件标签）
一、如何定义一个组件？
使用Vue.extend创建，其中options和new Vue（options）时传入的那个options几乎一样，但区别如下：
1.el不要写，为什么？—— 最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器 2.全局注册：靠Vue.component('组件',组件) 备注：使用template可以配置租金结构。
二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签
<组件名></组件名>
几个注意点：
一.关于组件名：一个单词组成： 1.第一种写法（首字母小写）：school
二.第二种写法（首字母大写）：School 二、多个单词组成：
1.第一种写法（kebab-case命名）：my-school
2.第二种写法（CamelCase命名）：MySchool
备注：
(1).组件尽可能回避HTML中已有的元素名称，列如：h2、H2都不行
(2).可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签: 第一种写法:<school></school> 第二种写法:<school/> 备注：不使用脚手架时，<school/>会导致后续组件不能渲染
3.一个简写方式： const school=Vue.extend(options) 可简写成：const school = options
关于VueComponent：
1.shool组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写,Vue解析时会帮我们创建school组件实例对象，即Vue帮我们执行的：new VueComponent
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.一个重要的内置关系：VueComponent.prototype.proto===Vue.prototype 2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
创建单文件组件
一、创建.vue文件 二、.vue内容： <template>、<script>、<style>三大标签，分别对应html、js、style 三、在script标签中怎么写组件？： import 组件名 from 路径 //这里是引入单文件组件
export default{// export default是暴露组件，{}是组件的简写写形式 name:"组件名", data(){}, components:{ 要添加的组件 } }
//export default是暴露组件
export default{
name:"组件名",
data(){
return{
...
}
},
components:{
//要添加的组件
...
}
}
Vue脚手架 Vue Cli
1.创建好的组件文件都得放在脚手架中的src/compons目录下（App组件除外）
2.App组件的放在脚手架中src目录下
3.所有静态资源都得放在src/assets目录中 4.main.js是入口文件
5.启动脚手架命令： (1).打开终端，cd切换到脚手架路径 (2).在终端输入 npm run serve 启动脚手架
关于不同版本的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函数去指定具体内容
关于render函数
render函数是服务于没有模板解析器的vue的，作用是把返回值解析到模板上
render(createElement) render函数有一个参数是createElement是function类型的参数，createElement的作用是用于创建元素的，注意render不能没有返回值
可以使用简单的字母来接收createElement参数
render函数：
render(createElement){
return createElement(组件名或（"html元素","内容"）)
}
可以使用火箭头函数进行简写：
render: 参数=>参数(组件) 同 render: h => h(App)//h是用来接收createElement参数的
总结：
render函数可以把返回值解析到模板上，render函数有有关参数createElement来创建元素，render用来把创建好的元素解析到模板上
配置脚手架文件
vue.confing.js是脚手架中的配置文件
使用Vue inspect > output.js可以查考到Vue脚手架的默认配置
使用vue.config.js 可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh
Vue脚手架文件结构
node_modules
public
|— favicon.ico:页签图标
|_ index.html:主页面
src
|—— assets:存放静态资源
|_ logo.png
|—— component:存放组件
|_ HelloWorld.vue
|—— App.vue:汇总说有组件
|—— main.js:入口文件
.gitignore:git:版本管制忽略的配置
babel.config.js:babel的配置文件
package.json:应用包配置文件
README.md:应用描述文件
package-lock.json:包版本控制文件
Vue ref属性
1.被用来给元素或子组件注册引用信息（id的代替者）
2.应用在html标签上获取的是真实dom元素，应用在组件标签上时组件实例对象（vc）
3.使用方式：
打标识：<h1 ref="xxx">......</h1>或<School ref="xxx"></School>
获取：this.$refs.xxx
配置项props
功能：让组件接收外部传过来的数据
(1).传递数据
<Demo name="xxx"/>
(2).接收数据：
第一种方式(只接收)：
props:['name']
第二种方式(限制类型):
props:{
name:Number
}
第三种方式(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String,//类型，type属性时规定name的值必须是什么类型
required:true,//必要性，required属性是规定name必须有值
default:'老王'//默认值，default属性是name如果没有值则使用默认值
}
}
备注：props是只读的，Vue低层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，呢么请复制props的内容到data中一份，然后去修改data中的数据
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.$myMethod = function(){...}
Vue.prototype.$myProperty = xxx
}
使用插件：Vue.use()
scoped样式
作用：让样式在局部生效，防止冲突
写法:
总结TodoList案例（第一版）
组件编码化流程：
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
(1).一个组件再用：放在组件自身即可
(2).一些组件在使用：放在他们共同的父组件上（状态提升）
(3).实现交互：从绑定事件开始。
2.props适用于：
(1).父组件==>子组件 通信
(2).子组件==>父组件 通信（要求父先给子一个函数）
3.使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的
4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错,但不推荐这样做
组件的自定义事件
1.一种组件间通信的方式,适用于：子组件===>父组件
2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调中）。
3.绑定自定义事件：
1.第一种方式，在父组件中：
<Demo @自定义事件名="方法"/> 或 <Demo v-on:@自定义事件="方法"/>
2.第二种方法，在父组件中：
<Demo ref="demo"/>
.....
mounted(){
this.$refs.demo.$on('自定义事件名',方法)
}
3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
4.触发自定义事件：this.$emit('自定义事件名',数据)
5.解绑自定义事件：this.$off('自定义事件名')
6.组件上也可以绑定原生DOM事件，需要使用native修饰符
7.注意：通过this.$refs.xxx.$on('自定义事件名',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
全局事件总线（GlobalEventBus）
1.一种组件间通信方式，适用于任意组件间通信
2.安装全局事件总线：
new Vue({
......
beforeCreate(){
Vue.prototype.$bus=this
},
......
})
3.使用事件总线
1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods(){
demo(data){......}
}
mounted(){
this.$bus.$on('事件名',this.demo)
//或者这样写
this.$bus.$on('事件名',(data)=>{......})
}
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.unsubscribe(pid)取消订阅
nextTick
1.nextTick 作用：在下一次DOM更新结束后执行其指定的回调
2.作用：在下一次DOM更新结束后执行其指定的回调
3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些指定的回调到函数中执行
4.语法：nextTick(()=>{回调}) 或 nextTick(function (){回调})
Vue封装的过度与动画
1.作用：在插入，更新或移除DOM元素时，在适合的时候给元素添加样式类名
3.写法：
1.准备好样式：
元素进入时的样式：
1.v-enter：进入的起点
2.v-enter-active：进入过程中
3.v-enter-to：进入的终点
元素离开的样式：
1.v-leave：离开的起点
2.v-leave-active：离开过程中
3.v-leave-to：离开的终点
2.使用包裹要过度的元素，并配置name属性
<transition name="hello">
<h1 v-show="isShow">你好啊！</h1>
</transition>
3.备注：若有多个元素需要过度，则需要使用,且每个元素都要指定key值
vue脚手架配置代理
方法一
在vue.config.js中添加如下配置：
devServer:{
proxy:'http://127.0.0.1:5000'
}
说明：
1.优先：配置简单，请求资源时直接发给前端（8080）即可
2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
方法二
编写vue.config.js配置具体代理规则：
module.exports={
devServer:{
proxy:{
'/api1':{//匹配所有以'/api'开头的请求路径
//代理目标的基础路径
target:'http://127.0.0.1:5000',
//是否开启虚假host
changeOrigin:true,
pathRewrite:{'^/api1':''}
},
'/api2':{
target:'http://127.0.0.1:5001',
changeOrigin:true,
pathRewrite:{'^/api2':''}
}
}
}
插槽
1.插槽的作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间的通行，适用于父组件===>子组件
2.分类：默认插槽、具名插槽、作用域插槽
默认插槽：让父组件可以向子组件指定位置插入html结构,默认插槽写再多也没有用，插入的html结构都会在同一插槽中
语法:
使用方法：
父组件中：
<Category>
<div>html结构<div>
</Category>
子组件：
<template>
<div>
<slot>插槽默认内容</slot>
</div>
</template>
具名插槽：可以添加多个插槽，给插槽添加一个名字，根据插槽的名字来决定html插入到那个插槽
语法：
使用方法：
父组件中：
<Category>
<template slot='xxx'>
<div>html结构</div>
</template>
</Category>
子组件中：
<template>
<div>
<slot name='xxx'>插槽默认内容</slot>
<slot name='xxx2'>插槽默认内容</slot>
<div>
</template>
作用域插槽：
1.理解：数据再组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据再Category组件中，但使用数据所遍历出来的结构由App组件决定）
语法：
<solt :data="data"></solt> 发送数据
<template scope="data"> 收数据
使用方法：
父组件：
<template>
<div id="app">
<!-- 作用域插槽-->
<Classification>
//接收插槽的数据
<template scope="{games}">
<ul>
<li v-for="(i,index) in games" :key="index">{{i}}</li>
</ul>
</template>
</Classification>
<Classification>
<template scope="{games}">
<ol>
<li v-for="(i,index) in games" :key="index">{{i}}</li>
</ol>
</template>
</Classification>
</div>
</template>
<script>
import Classification from "@/components/Classification";
export default {
name: "App",
components:{Classification}
}
</script>
子组件：
<template>
<div class="box">
<h3>分类</h3>
//发送数据
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name: "Classification",
data(){
return{
games:['穿越火线','永劫无间','王者荣耀']
}
}
}
</script>
Vuex
1.vuex作用
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。
2.安装Vuex
npm i Vuex@版本号
备注：Vue2的Vuex版本是Vuex@3，现在vue默认版本是3所以安装的会是Vuex@4版本
3.Vuex原理
actions：用于响应组件中的动作（方法）在actions中的方法第一个参数context接收的是一个对象，对像里面有dispatch，commit，state等，可以理解为一个小型的store
//定义动作（方法）
语法：const actions={
test(context,value){ // context可以理解为一个小型的store
context.commit('TEST',value)//调用mutations中的方法来执行最终的数据操作
}
}
dispatch：用于执行在actions中的动作（方法）
语法：this.$store.dispatch('test',value)//这里调用了actions中的test动作（方法）
mutations：用于操作数据，在mutations中的方法中第一个参数接收的是state，用于读取修改数据
语法：const mutations={
//定义最终执行的操作（方法）
TEST(state,value){
state.sum=state.sum+value
}
}
commit：调用在mutations中的方法,也可以在组件中越过actions直接调用mutations中的方法直接操作数据
语法：
//在actions中的方法使用
commit('TEST',vlaue)
//在组件中直接调用
this.$store.commit('TEST',value)
state：用于存储数据并实行解析到组件上组件组件再重新解析dom把数据渲染到页面上
语法：
const state={
sum:0
}
//vue组件中读取Vuex中的数据：$store.state.sum
4.Vuex基本使用
1.初始化数据、配置actions、配置mutations，操作文件store.js
//创建store
//先引入vue组件
import Vue from 'vue'
//再引入vuex插件
import Vuex from'vuex'
// 调用vuex插件
Vue.use(Vuex)
//创建actions———用于响应组件中的动作
const actions = {
jiaddo(context,value){
if(context.state.sum % 2){
context.commit('JIANDDO',value)
}
},
wait(context,value){
setTimeout(()=>{
context.commit('WAIT',value)
},500)
}
}
//创建mutations————用于操作数据
const mutations = {
JIA(state){
state.sum++
},
JIAN(state){
state.sum--
},
JIANDDO(state,value){
state.sum=state.sum+value
},
WAIT(state,value){
state.sum=state.sum+value
}
}
//创建state————用于存储数据
const state = {
sum:0
}
//new 一个store实例
export default new Vuex.Store({
actions,
mutations,
state
})
具体步骤：
1.创建一个store.js文件或者创建store/index.js
2.引入vue文件与vuex文件
import Vue from 'vue'
import Vuex from 'vuex'
3.调用vuex插件
Vue.use(Vuex)
4.创建好actions，mutations，state配置项
5.new 一个store实例并把实例暴露出去
//new 一个store实例
export default new Vuex.Store({
//把创建好的配置项添加进去
actions,
mutations,
state
})
6.在main.js文件中引入store文件并在Vue实例中配置好store
miport store from './store'
const vm =new Vue({
//在vm上添加store,让所有组件可访问到store
store,
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus=this
}
}).$mount('#app')
总结：
1.组件要获取Vuex中的数据：this.$store.state.数据名
2.组件中修改Vuex中的数据通过dispatch访问到actions中的动作（方法）或者通过commit访问到mutations中的方法来修改数据
原理：组件-->dispatch-->actions-->commit-->mutations-->state-->组件
5.getters的使用
1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
2.在store.js中追加getters配置
//创建getters————给state中的数组进行加工
const getters={
bigSum(state){
return state.sum*10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
3.在组件中读取数据：$store.getters.bigSum
Vuex中的四个map方法的使用
介绍四个map方法之前先介绍一个es6语法 ...
... 是es6中的展开运算符，作用是把数组或对象一一展开，
如：
let a = {
x:100,
y:200
}
let b = {
neo:1,
...a,
two:2
}
//b的结果就是：{neo:1,x:100,y:200,two:2}
介绍完展开运算符下面开始正式介绍Vux中的四个map方法
1.mapState方法：用于帮助我们映射state中的数据为计算属性
mapState方法会在$store.state中找数据，并把找的数据返回
语法：mapState(要找的数据)
computed:{
//借助mapState生成计算属性，sum、school、subject（对象写法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性，sum、school、subject（数组写法）
...mapState(['sum','school','subject'])
}
2.mapGetters方法：用于帮助我们映射getter中的数据为计算属性
mapGetters方法会在$store.getters中找数据，并把找的数据返回
computed{
//借助mapGetters生成计算属性：bigSum（对象写法）
...mapGetters({bigSum:'bigSum'})，
//借助mapGetters生成计算属性：bigSum（数组写法）
...mapGetters([bigSum:'bigSum'])
}
3.mapActions方法：用于帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)的函数
mapActions方法会调用$store.dispatch来访问actions中的方法，并把匹配的方法返回
computed:{
//借助mapActions生成对应方法，方法会调用dispatch来联系actions（对象写法）
...mapActions({addOdd:'jiaodd',waitAdd:'wait'}),
//借助mapActions生成对应方法，方法会调用dispatch来联系actions（素组写法）
...mapActions(['jiaodd','wait'])
}
4.mapMutations方法：用于帮助我们生成mutations对话的方法，既：包含$store.commit(xxx)的函数
mapMutations方法会调用$store.commit来访问mutations中的方法，并把匹配的方法放回
computed:{
//借助mapMutations生成对应方法，方法会调用commit来联系mutations（对象写法）
...mapMutations({bonus:'JIA',impairment:'JIAN'}),
//借助mapMutations生成对应方法，方法会调用commit来联系mutations（数组写法）
...mapMutations(['JIA','JIAN'])
}
注意事项：
mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数时事件对象
如：<button @click="JIA(value)"></button>
Vuex中的map方法中的数组写法，数组的值必须与store中所存在的值名一样，并且模板中的数据也得一致
正确示范：
const state={
n:1
}
computed:{
...mapState(['n'])
}
//在模板中
<h3>n的值是{{n}}</h3>
Vuex模块化+命名空间
1.目的：让代码更好维护，让多种数据分类更加明确。
2.修改store.js
const counAbout={
namespaced:true,//开启命名空间
state:{x:1},
actions:{...},
mutations:{...},
getters:{
bigSum(state){
return state.sum*10
}
}
}
const personAbout={
namespaced:true,//开启命名空间
state:{x:1},
actions:{...},
mutations:{...}
}
const store=new Vuex.Store({
modules:{
counAbout,
personAbout
}
})
3.开启命名空间后，组件中读取state数据
//方式一，自己直接读取
this.$store.state.personAbout.list,
//方式二，借助mapState读取
...mapState('countAbout',['sum','school','subject'])
4.开区命名空间后，组件中读取getters数据
//方式一、自己直接读取
this.$store.getters['PersonModule/listHead'],
//方式二、借助mapGetters读取
...mapGetters('countAbout'['bigSum'])
5.开启命名空间后，组件中调用dispatch
//方式一、自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person),
//方式二、借助mapActions
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
6.开启命名空间后，组件中调用的commit
//方式一、自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person),
//方式二、借助mapMutations
...mapMUtations('countAbout',{increment:'JIA',decrement:'JIAN'})
Vue路由
路由
路由是什么？
一个路由（route）就是一组映射关系，（key-value），多个路由需要路由器（router）进行管理
前端路由：key是路径，value是组件
一、基本使用
1.安装vue-router, 命令：npm ivue-router
2.应用插件：Vue.use(VueRouter)
3.编写router配置项：
//配置路由文件
//映入VueRouter（路由）
import VueRouter from "vue-router";
//引入组件
import About from "@/components/About";
import Home from "@/components/Home";
//暴露router
export default new VueRouter({
//routes配置路由
routes:[
{
//配置路由路径
path:'/about',
//这个路由指定的组件（路由组件）
component:About
},
{
//配置路由路径
path:'/home',
//这个路由指定的组件（路由组件）
component:Home
}
]
})
4.实现切换（active-class可配置高亮样式）
<!--借助router-link实现路由的切换-->
<router-link class="a1" active-class="active" to="/about">About</router-link>
//router-link标签属性to：填写指定的路由路径，指定的路由路径对应着路由组件，点击把路由组件显示到router-view指定位置（路由跳转）
5.指定组件显示位置
<!--指定路由组件呈现位置-->
<router-view></router-view>
二、几个注意点
1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2.通过切换，”隐藏“了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的$route属性，里面存储着自己的路由信息
4.整个应用只有一个router，可以通过组件的$router属性获取到
三、路由的嵌套（多级路由）
1.配置路由规则，使用chlldern配置项：
router:[
{
//路由路径
path:'/home'
//路由组件
component:Home
//配置home的子路由
childeren:[
{
//子路由路径，配置子路由路径不需要写“/”,脚手架会自动加上“/”
path:'news'，
//子路由组件
component:News
}
]
}
]
2.跳转（要写完整的路径）：
<router-link to="/home/news">News</router-link>
四、路由的query参数
1.传递参数
<!-- 跳转并携带query参数,to的字符串写法,?之后就开始写query参数-->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router>
<!--跳转并携带query参数,to的对象写法-->
<router-link
:to="{
path:'/home/message/detail',
//query参数
query:{
id:666,
title:'你好'
}
}"
>跳转</router>
2.接收参数：
$route.query.id
$route.query.title
五、命名路由
1.作用：可以简化路由的跳转
2.如何使用 1.给路由命名：
//routes配置路由
routes:[
{
//配置路由路径
path:'/home',
//这个路由指定的组件
component:Home,
children:[//通过children配置home子路由
{
path:'message',
component:Message,
children:[//通过children配置message子路由
{
name:'info',//给路由命名
path:'info',
component:Info
}
]
}
]
}
]
2.简化跳转
<!--简化前，需要写完整的路径-->
<router-link to='/home/message/info'>跳转</router>
<!--简化后，直接通过名字跳转-->
<router-link :to='{name:'info'}'>跳转</router>
<!--简化写法配合传递参数-->
<router-link
:to='{
name:'info',
query:{
id:666,
title:'你好'
}
}'>跳转</router>
六、路由的params参数
1.配置路由，声明接收params参数
{
name:'message',
path:'message',
component:Message,
children:[
{
name:'info',
path:'info/:id/:name',//使用占位符声明接收params
component:Info
}
]
}
2.传递参数
<!--跳转并携带params参数，to的字符串写法-->
<router-link class="info" :to="`/home/message/info/666/你好`">跳转</router-link>
<!--跳转并携带params参数，to的对象写法-->
<router-link
:to="{
name:'info',
params:{//params参数
id:666,
name:'你好'
}
}"
>跳转</router-link></li>
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3.接收参数
$route.params.id
$route.params.name
七、路由的props配置
作用：让路由组件更方便的收到参数
{
name:'info',
path:'info/:id/:name',
component:Info,
//props第一种写法：props值为对象，该对象中所有key-value值都会通过props传入info组件
props:{id:'666',name:'你好'}
//props第二中写法：props值为布尔值，布尔值为true是则该路由接收的所有params参数通过props传入info组件
props:true
//props第三中写法，props为一个函数回调，该函数会返回每一组key-value通过props传入info组件
//当调用props函数回调时，props会接收一个$router参数，供我们使用
props({query}){//用到了对象解构，把$router中的query单独拿出来使用
return{
id: query.id,
name: query.name
}
}
}
八、<router-link>的replace属性
1.作用：控制路由跳转是操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
3.如何开启replace模式：<router-link replace......>Message</router-link>
九、编程式路由导航
1.作用：不借助实现跳转，让路由跳转更加灵活
2.具体编码：
//$router的两个API
//push跳转
this.$router.push({
name:'message',
params:{
id:xxx,
title:xxx
}
})
//replace跳转
this.$router.replace({
name:'message',
params:{
id:xxx,
title:xxx
}
})
十、缓存路由组件
1.<keep-alive includ="组件名">作用：让不展示的路由组件保持挂载，不被销毁（保持被激活状态）
2.具体编码：
<keep-alive includ="组件名">
<router-view></router-view>
</keep-alive>
十一、两个新的生命周期钩子
路由组件所独有的两个钩子，用于捕获路由组件的激活状态
1.activated路由组件被激活时触发
1.deactivated路由组件失活时触发
十二、路由守卫
1.路由守卫的作用：对路由进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫
3.全局守卫：
router.beforeEach((to,from,next)=>{...})全局前置守卫
参数：
to：当前路由
from：是从哪个路由切换到当前路由的
next：放行
//全局前置守卫，初始化时执行、每次路由切换前执行
router.beforeEach((to,form,next)=>{
if(to.meta.isAuth){//判断当单前路由是否需要进行权限控制
if(localStorage.getItem('School')==='xxx'){//权限控制的具体规则
next()//放行
}else{
alert('没有权限查看')
}
}else{
next()//放行
}
})
//全局后置路由守卫，初始化时执行、每次路由切换后执行
router.afterEach((to,form)=>{
if(to.meta.title){
document.title=to.meta.title//修改网页标题
}
})
4.独享守卫：
beforeEnter((to,from,next)=>{...}) 独享守卫
//设置news的独享守卫，beforeEnter独享守卫
beforeEnter(to,from,next){
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('School')==='xxx'){
next()
}
else{
alert('学校名称不对')
}
}
else{
next()
}
}
5.组件内守卫
//进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){......}
//离开守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(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的问题。
5.配置路由工作模式
const router= new VueRouter({
mode:history//配置为history工作模式，不配置则默认为hash模式
})
vue打包
npm run build 打包静态资源
