尚硅谷Vue P101

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写法.将对象属性赋值给另一个对象

1. mapState方法：用于帮助我们映射state中的数据为计算属性
   

   computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },
   

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },
   

p113 mapActions与mapMutations

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }
   

4. 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

1. 目的：让代码更好维护，让多种数据分类更加明确。

2. 修改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
     }
   })
   

3. 开启命名空间后，组件中读取state数据：

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),
   

4. 开启命名空间后，组件中读取getters数据：

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助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'}),
   

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

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观 。
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3. 兼容性较好。

4. history模式：

   1. 地址干净，美观 。
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

   部署方式,先打包 npm run build 产生dist,利用node的experss部署