p101 vue-resource(了解,推荐使用axios)
异步请求的几种方式
安装插件
安装使用插件后vm和vc会有$http这个属性
vue-resource和axios使用几乎一样
p102 默认插槽
多个类似结构的组件,可以传不同的插槽
p103 具名插槽
定义好插槽名
往插槽放置元素
使用template标签时,可以写为 v-slot:插槽名
p104 作用域插槽
使用作用域插槽
为什么games前面有前缀,因为可能会给插槽传递多个值,每个值是一个key
小结:
p105 Vuex简介
以前的事件总线
p106 求和案例 纯vue版本
p107 vuex工作原理图
p108 搭建vuex环境
建立store文件夹,新建index.js 目的:建立store对象
但是上面代码 顺序会有问题,vuex需要先Vue.use(Vuex)使用,而
在之前就会执行store中的代码使用到vuex,所以我们需要修改下代码是执行顺序,直接在store的代码总引入并使用vuex插件
修改后代码为下:
使用vuex插件,并且创建store对象后,在上述创建vm时中添加store属性,可以在vm和vc中都看见并使用 $store对象了
p109 求和案例 vuex版
p110 vuex开发者工具的使用
p111 getters配置项
p112 mapstate与mapgetters
当我们使用$store中的state或getters中属性一长串很麻烦,
有简写形式
…是es6写法.将对象属性赋值给另一个对象
-
mapState方法:用于帮助我们映射
state
中的数据为计算属性
computed: { //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性:sum、school、subject(数组写法) ...mapState(['sum','school','subject']), },
-
mapGetters方法:用于帮助我们映射
getters
中的数据为计算属性computed: { //借助mapGetters生成计算属性:bigSum(对象写法) ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性:bigSum(数组写法) ...mapGetters(['bigSum']) },
p113 mapActions与mapMutations
-
mapActions方法:用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数methods:{ //靠mapActions生成:incrementOdd、incrementWait(对象形式) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成:incrementOdd、incrementWait(数组形式) ...mapActions(['jiaOdd','jiaWait']) }
-
mapMutations方法:用于帮助我们生成与
mutations
对话的方法,即:包含$store.commit(xxx)
的函数methods:{ //靠mapActions生成:increment、decrement(对象形式) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成:JIA、JIAN(对象形式) ...mapMutations(['JIA','JIAN']), }
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
上述方法不能直接使用this.n作参数,要使用简写的形式,在调用方式时,必需传参
p114 多组件共享数据
略
p115 vuex模块化 + namespace
模块化之前:
模块化后:
使用后加命名空间,简写
多个模块state
p116 vuex模块化 + namespace2
-
目的:让代码更好维护,让多种数据分类更加明确。
-
修改
store.js
const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced:true,//开启命名空间 state:{ ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { countAbout, personAbout } })
-
开启命名空间后,组件中读取state数据:
//方式一:自己直接读取 this.$store.state.personAbout.list //方式二:借助mapState读取: ...mapState('countAbout',['sum','school','subject']),
-
开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取 this.$store.getters['personAbout/firstPersonName'] //方式二:借助mapGetters读取: ...mapGetters('countAbout',['bigSum'])
-
开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二:借助mapActions: ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
-
开启命名空间后,组件中调用commit
//方式一:自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二:借助mapMutations: ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
p117 路由的简介
前端路由和后端路由
p118 路由基本使用
安装路由插件
应用插件
创建并暴露一个路由器,路由里面配置不同的组件路径
引入我们定义好的路由器(蓝色边框内)
在App.vue中使用路由
p119几个注意点
为了规范,组件分为2种,一种是路由组件,一种是普通组件
各个组件vc上的路由不同,但是路由器是相同的
p120嵌套路由
效果
p121 路由的query参数
三级路由嵌套
传参
上图中传了参数是假的,和data中数据无关,下面使用传data中的数据
字符串写法传参(不推荐)
对象写法传参(推荐)
使用传过来的参数
效果
p122 命名路由
这里跳转的时候,就不用写一长串path了,通过name映射到路径
对象式
字符串式
p123 路由的params参数
两种参数query和params
传参
样例
真实传参
使用参数
注意:有个坑
当这里使用params传参时,路由跳转无法使用path,只能使用name
p124 路由的props配置
作用:让路由组件更方便的收到参数
p125 router-link的replace属性
默认push模式,一直保留历史记录
replace模式
最新的会替换之前的路由地址,无法返回历史
p126 编程式路由导航
前进 后退 前后
p127缓存路由组件
include存储的是组件名
p128 两个新的生命周期钩子
p129 全局前置_路由守卫
p130 全局后置_路由守卫
p131 独享路由守卫
p132组件内路由守卫
p133 history模式与hash模式
hash模式地址栏带 #,后面的地址不会带给后端服务器
模式为hash或者history
-
对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
-
hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
-
hash模式:
- 地址中永远带着#号,不美观 。
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
- 兼容性较好。
-
history模式:
- 地址干净,美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
部署方式,先打包 npm run build 产生dist,利用node的experss部署