目录
消息订阅与发布
1、订阅消息：消息名
2、发布消息：消息内容
一、 安装pubsub，并引入
二、接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
import pubsub from 'pubsub-js'
methods(){
demo(data){
....
}
}
mounted(){
this.pid = pubsub.subscrib('xxx',this.demo) //订阅消息
}三、提供数据：pubsub.publish('xxx', data)
四、最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)取消订阅
nextTick
1、语法：this.$nextTick(回调函数)
2、作用：在下一次DOM更新结束后执行其指定的回调。
3、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
transition组件
一、 当插入或删除包含在transition组件中的元素时，Vue将会做以下处理：
1）自动嗅探目标元素是否应用了CSS过渡或动画，如果是，则在恰当的时机添加/删除CSS类名
2）如果过渡组件提供了JavaScript钩子函数，则这些钩子函数将在恰当的时机被调用
3）如果没有找到JavaScript钩子函数且没有找到CSS过渡/动画，则DOM操作在下一帧中立即执行
二、transition组件提供的6个过渡类
1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以用来定义进入过渡的过程时间、延迟和曲线函数。
3）v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效（v-enter此时被移除），在过渡/动画完成之后移除。
4）v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以用来定义离开过渡的过程时间、延迟和曲线函数。
6）v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后之后下一帧生效（v-leave此时被移除），在过渡/动画完成之后移除。
插槽
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
分类：默认插槽、具名插槽、作用域插槽
1、默认插槽
父组件中：
<Category>
<div>结构</div>
</Category>
子组件中：
<template>
<div>
//定义插槽
<slot>插槽默认内容</slot>
</div>
</template>
2、具名插槽
父组件中：
<Category>
<template slot="center">
<div>
html结构
</div>
</template>
<template slot="footer">
<div>
html结构
</div>
</template>
</Category>
子组件中：
<template>
<div>
//定义插槽
<slot name="center">插槽默认内容</slot>
<slot name="footer">插槽默认内容</slot>
</div>
</template>
3、作用域插槽
数据在组件（定义插槽的组件<Category>）的自身，但根据数据生成的结构需要组建的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
父组件中：
<Category>
<template scope="scopData">
<ul>
<li v-for="g in scopData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template scope="{{games}}">
<h4 v-for="g in games" :key="g">{{g}}</h4>
</template>
</Category>
子组件中：
<template>
<div>
<slot :games="games">插槽默认内容</slot>
</div>
</template>
<script>
export default:{
name:'Category',
data(){
return{
games:['pink','snake','white']
}
}
}
</script>Vuex中的配置选项
mapState方法：用于帮助我们生成与state对话的方法，即包含$store.state的函数
//mapState生成计算属性，从state中获取数据（对象写法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
//mapState生成计算属性，从state中获取数据（数组写法）
...mapState(['sum','school','subject']),mapGetters方法：用于帮助我们生成与getters对话的方法，即包含$store.getters的函数
//mapGetters生成计算属性，从getters中获取数据（数组写法）
...mapGetters(['bigSum'])
//mapGetters生成计算属性，从getters中获取数据（对象写法）
...mapGetters({bigSum:'bigSum'})mapActions方法：用于帮助我们生成与actions对话的方法，即包含$store.dispatch的函数
//借助mapactions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
...mapActions({addWait:'addOdd',addWait:'addWait'})
//借助mapactions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
...mapActions(['addOdd','addWait'])mapMutations方法：用于帮助我们生成与mutations对话的方法，即包含$store.commit的函数
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
...mapMutations({ADD:'ADD',JIAN:'JIAN'})
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）
...mapMutations(['ADD','JIAN'])路由
理解：一个路由是一组映射关系，多个路由需要路由器进行管理
1、基本使用
1、安装vue-router：npm i vue-router
2、应用插件：Vue.use(VueRouter)
3、编写配置项：
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
//创建实例对象
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})4、实现切换（active-class可配置高亮模式）
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>5、展示指定位置：
<!-- //指定组件的呈现位置 -->
<router-view></router-view>多级路由
1、配置路由规则，使用配置项children
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message
}
]
},2、跳转（填写完整路径）
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
</li>
<li>
<router-link class="list-group-item" to="/home/news" active-class="active">News</router-link>
</li>
</ul>
<router-view></router-view>
</div>路由的query参数
1、传递参数
<ul>
<li v-for="msg in messageList" :key="msg.id">
<!-- 跳转路由携带query参数的to字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{{msg.title}}</router-link> -->
<!-- 跳转路由携带query参数的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:msg.id,
title:msg.title
}
}">
{{msg.title}}
</router-link>
</li>
<hr>
<router-view></router-view>
</ul>2、接收参数
<ul>
<li>消息编号：{{$route.query.id}}</li>
<li>消息内容：{{$route.query.title}}</li>
</ul>路由的params参数
1、配置路由声明接受params参数
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //声明接受params参数
component:Detail
}
]
}2、传递参数
<ul>
<li v-for="msg in messageList" :key="msg.id">
<!-- 跳转路由携带params参数的to字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${msg.id}/${msg.title}`">{{msg.title}}</router-link> -->
<!-- 跳转路由携带params参数的对象写法 -->
<router-link :to="{
name:'xiangqing', //这里不允许使用path，只能用name
params:{
id:msg.id,
title:msg.title
}
}">
{{msg.title}}
</router-link>
</li>
<hr>
<router-view></router-view>
</ul>3、接收数据
<ul>
<li>消息编号：{{$route.params.id}}</li>
<li>消息内容：{{$route.params.title}}</li>
</ul>路由的props配置
children:[
{
name:'xiangqing',
path:'detail/:id/:title',
component:Detail,
//props的第一种写法，值为对象，该对象中所有的key-value都会以props的形式传递给Detail组件
// props:{a:1,b:'helo'}
//props的第二种写法，值为布尔值，若值为真，
//则会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
// props:true
//props的第三种写法，值为回调函数
props($route){
return{
id:$route.query.id,
title:$route.query.title
}
}
}
]“<router-link>”的replace属性
控制路由跳转时操作浏览器历史记录的模式，有两种方式：push和replace，push是追加历史记录，replace是替换当前历史记录，浏览器跳转时默认是push。若要改成replace模式只需要在<router-link>里添加replace字样。
编程式路由导航
不借助<router-link>实现页面的跳转
<button @click="pushShow(msg)">push</button>
<button @click="replaceShow(msg)">replace</button>
methods: {
pushShow(msg){
this.$router.push({
name:'xiangqing',
query:{
id:msg.id,
title:msg.title
}
})
},
replaceShow(msg){
this.$router.replace({
name:'xiangqing',
query:{
id:msg.id,
title:msg.title
}
})
},
},路由守卫
作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫
1、全局路由守卫
//全局前置路由守卫——初始化的时候被调用，每次路由切换之前被调用
// router.beforeEach((to, from, next)=>{
// if(to.path ==='/home/news' || to.path === '/home/message'){
// if(localStorage.getItem('school') === 'atguigu'){
// next()
// }
// }else{
// next()
// }
// })
// router.beforeEach((to, from, next)=>{
// if(to.meta.isAuth){ //判断是否需要鉴定有没有权限
// if(localStorage.getItem('school') === 'atguigu'){
// next()
// }
// }else{
// next()
// }
// })
//后置路由守卫——初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to,from)=>{
document.title = to.meta.title || 'atguigu'
})2、独享路由守卫
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:false,title:'kk'},
beforeEnter:(to, from, next)=>{
if(to.meta.isAuth){ //判断是否需要鉴定有没有权限
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('no authority')
}
}else{
next()
}
}3、组件内守卫
//进入守卫，通过路由规则，进入该组件时调用
beforeRouteEnter(to, from, next){
if(to.meta.isAuth){ //判断是否需要鉴定有没有权限
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('no authority')
}
}else{
next()
}
},
//离开守卫，通过路由规则，离开该组件时调用
beforeRouteLeave(to, from, next){
next()
}
3570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
