Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Day1
axios:
拦截器
当客户端的数据发送到服务端之前，以前服务端的数据响应到客户端之前的一次拦截
1、get的数据
config.params = {...config.data}
axios({
method:
url:
data
})
content-type:application/x-www-form-urlencoded
qs.stringify
if(res.statusText == ok){
return res.data
}
export default (method,url,data)=>{
if(method == get)
{
return server.get(url,{
params:data
})
}else{
return server.post(url,data)
}
}
插槽
组件嵌套的元素/组件默认是不会显示的
插槽
匿名插槽
命名插槽
插槽作用域
<template v-slot:名字="props"></template>
Day2
Vue动画
tranisition标签
name：动画的类名
v-if v-show
6个类名
name-enter
name-enter-active
name-enter-to
name-leave
name-leave-active
name-leave-to
动态添加类名
css3动画库
tranisition
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
tranisition-group
每个子元素必须要加一个key值
路由：
前端路由
后端路由
1、cnpm install vue-router -S
2、查用插件的流程
引入vue
引入插件
Vue.use(使用插件)
new VueRouter({
routes:[
{
path:
component
children
meta
props
name
}
]
})
<router-view></router-view>
<router-link></router-link> to tag
路由传值
动态路由
query传值
路由解耦
Day3
路由
redirect：
编程式导航：
路由守卫：
全局守卫
beforeEach
局部守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
vuex:
公共状态管理模式
最好的非父子组件传值方案
state actions mutations
new Vue({
store
})
this.store.dispacth
state
commit
1、cnpm install vuex -S;
2、引入vue
3、引入vuex
4、使用vuex vue.use(vuex)
Vuex中常用的5个属性
state:
用来存储公共的状态
辅助函数：
mapState
书写方式有2中
1.数组
computed:mapState(["n","a","b"]),
2.对象
computed:{
...mapState({
n:state=>state.n,
a:state=>state.a,
b:state=>state.b
})
},
actions
用来处理异步的数据,并且用来触发mutations中的方法
actions中的每一个方法都会有2个参数 一个参数是对象 对象中有一个commit方法用来触发mutations中的方法。另外一个参数是选填的
是需要传递的参数
mapActions
使用的方式
1.数组
methods: mapActions(["handleAddActions"])
2.对象
methods: {
...mapActions({
handleAddActions:"handleAddActions"
})
}
mutations
用来修改state中的数据
mutations里面的方法有2个参数
参数1:是state
参数2：是commit携带过来的参数
辅助函数
1.mapMutations([""])
2.
...mapMutations({
handleAddMutation:"handleAddMutation"
})
getters:
属性计算 类似于组件中的computed。与computed有同样的功能
getters主要依赖state中的属性，当state中的属性发生变化的时候。getters中的方法就会被触发
辅助函数
mapGetters
1.数组
methods: mapGetters(["handleAddActions"])
2.对象
methods: {
...mapGetters({
handleAddActions:"handleAddActions"
})
}
modules:
公共状态数据模块化
每一个小的模块都是一个小型的Vuex。小模块中也会有state getter mutations actions
当导出子模块的时候切记加一个namespaced：true作用是可以使当时模块的数据私有化
注意如果通过mapActions mapMutations来使用Vuex中的方法时，需要在methods中进行解构
注意如果通过mapState mapGetters来使用Vuex中的方法时，需要在computed中进行解构
面试题：
vuex数据传递的流程
当组件修改数据的时候必须通过store.dispacth来调用actions中的方法.当actions中的方法被触发的时候通过调用
commit的方法来触发mutations里面的方法。mutations中的方法用来修改数据。因为数据是响应式的。因此视图的数据也会发生改变
Vuex常用的属性有哪些。每一个属性的作用。以及Vuex数据传递的流程
mock数据
1、安装json-server
cnpm install json-server -g