Vue笔记第六天(设置cook、导航守卫、watch和filter的补充)

第六天

1.axios发post请求
axios .post( 网址,{传递给服务器的参数 }) .then(backData=>{})

2.设置让axios发请求时默认带cookie
原因:axios 跨域默认不携带cookie
解决办法:axios.defaults.withCredentials = true;

3.导航守卫
①.全局导航守卫–作用：可以在跳转到另一个路由之前，帮你做一些处理（比如说判断能不能访问接下来要访问的页面）
a. 语法:router.beforeEach((to, from, next) => { // ... // to是去哪 from是从哪来 next()放行 })
b.特点：进入路由的任何页面都会被调用，它叫全局导航。在进入组件之前就调用了
c.记得要么跳转到另外一个页面去，要调用next()放行，否则就没任何反应了

②.局部导航守卫:在哪个路由规则的组件里写beforeEnter，那么就代表只有进入到这个页面才会被拦截,用法跟全局是一样的
{ path: '/user', component: user,beforeEnter:(to, from, next) => { }

4.watch的补充
①侦听新值和旧值

  watch: {
                msg(newValue, oldValue) {                                                                                                       
                    console.log('侦听msg');
                    console.log(newValue,oldValue);
                    // 有参数的可以比较两次数据的异同
                },
             },

②深度侦听
原因:

• 默认情况下，侦听一个对象，但我们改变的是这个对象里的属性值，不会触发侦听
• 要想让对象里的属性只要改变都触发，就要用深度侦听
• 用法：
  • 在watch里些对象名，直接给的值也是对象
  • 对象里有2个，一个叫 handler（函数） 一个叫 deep:true

  food: {
        handler(newVal, oldVal) {
          console.log(newVal)
          console.log(oldVal)
        },
        // 开启深度侦听
        deep: true
      }    
      
  

注意事项:
开启深度侦听之后，2个参数给的值都相同!!!
原因:因为侦听的是对象，而我们改的只是属性值，那么侦听对象，对象的两次值没变（就是它的地址没变），仅仅变得只是属性值，所以才会新值和旧值一样
如果非要侦听到不同的值,可以改成普通侦听,具体侦听对象里的哪个属性，这样的话就能比较异同了

5.过滤器的补充
①过滤器的串联

a. 依次写一大堆的过滤器(不常用)

b. <h2>{{ info | addFont | addBack | addBack2 }}</h2>

filters: {
      addFont(value) {
        return '唱,' + value
      },
      addBack(value) {
        return value + ',rap'
      },
      addBack2(value) {
        return value + ',跳'
      }
    }

②过滤器传参

a. 调用过滤器时，和调用方法类似，传入参数即可

<h2>过滤器的传参</h2>
<p>{{ food | cookFood('小炒')}}</p>
<p>{{ food | cookFood('清蒸')}}</p>
<p>{{ food | cookFoodPlus('清蒸','红烧')}}</p>

b. 定义过滤器时

// 处理food的过滤器
  cookFood(foodName, do1) {
    return foodName + do1
  },
  // 高级烹饪
  cookFoodPlus(foodName, do1, do2) {
    return foodName + do1 + do2
  }

注意: 自己传入的参数，是从第二个开始，第一个参数固定是，处理的数据

③全局过滤器，局部过滤器

a. 定义一次

• 所有地方都可以用
• . 语法如下：参数1：过滤器名字，参数2：回调函数

    Vue.filter(过滤器名字, (value)=>{
       return value+'唱，跳，rap'
     })

• . 局部过滤器
  1. 定义一次，只在当前这个Vue实例中可以使用（组件）
  2. 实例内部的filters 局部过滤器