vue 知识点

~基本知识点

0.$data,$el,$watch 都是vm(实例)所拥有的方法或者属性  能够经过$+vue实例中属性--->直接操做表达
1.obejct.freeze() 方法能够冻结一个对象。一个被冻结的对象不再能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，
2. <!-- 绑定一个disabled只要值不为空 就是true -->  <li :disabled = "lop">{{res}}</li>  
3.  <button v-on:[event] ='evenFun'></button>绑定一个事件名称event（动态参数）,该绑定事件类型的方法不能用@来绑定
动态绑定元素属性值 <li v-bind:[names] = 'url'></li>
对动态参数的值的约束：
动态参数预期会求出一个字符串，异常状况下值为 null。这个特殊的 null 值能够被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
并且动态参数值只能小写，不支持大写
<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a> 
4.
      computed:   计算属性有缓存：计算属性是基于它们的响应式依赖进行缓存的;只在相关响应式依赖发生改变时它们才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。
      咱们为何须要缓存？假设咱们有一个性能开销比较大的计算属性 A，它须要遍历一个巨大的数组并作大量的计算。而后咱们可能有其余的计算属性依赖于 A 。若是没有缓存，咱们将不可避免的屡次执行 A 的 getter！若是你不但愿有缓存，请用方法来替代。
     
      <p>{{wwws}}</p> //表明返回的computed计算值
      
       computed : {
               wwws () {
                   return Date.now();
               }
            }
            
            <div>{{gets}}</div>
            默认是每一个计算属性计算时有get函数，能够进行缓存
             gets: {
                   get () { // ,在数据未发生变化时，优先读取缓存
                       return this.text + this.str
                   },
                    set() { //在设置数据时触发
                       return this.text + this.str
                   }
               }
5. watch:观察和响应 Vue 实例上的数据变更：侦听属性


6.  <li v-bind:class="bd">bds</li>//绑定一个返回对象的计算属性含的class,这是一个经常使用且强大的模式：
bd () {  
                    return {
                        active:'active',
                        en:'en'
                    }
               }
result——><li class="active en">bds</li>

 <li v-bind:class="[on ? on1 : on2]">on</li> //据条件切换列表中的 class，能够用三元表达式
        <div v-bind:class="[{ active: isActive }, errorClass]"></div>//当有多个条件 class 时这样写有些繁琐。因此在数组语法中也可使用对象语法
        
        
        
7.Vue 不能检测如下数组的变更：
        
        当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
        当你修改数组的长度时，例如：vm.items.length = newLength
        举个例子：
        
        var vm = new Vue({
        data: {
        items: ['a', 'b', 'c']
        }
        })
        vm.items[1] = 'x' // 不是响应性的
        vm.items.length = 2 // 不是响应性的


Vue 不能检测对象属性的添加或删除：:::
        对于已经建立的实例，Vue 不容许动态添加根级别的响应式属性。可是，能够
        使用 Vue.set(object, propertyName, value)或者vm.$set()方法向嵌套对象添加响应式属性;


        JS：Object.assign()方法用于将全部可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
        Object.assign(target, ...sources);target: 目标对象 sources: 源对象
        var obj1 = {
        b:2,
        a:1
        }     
        var obj2 = {
        c:3,
        d:4
        }  Object.assign(obj1,obj2);//obj2和obj1合并
为已有对象赋值多个新属性:::::
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
});

8.想要显示一个数组通过过滤或排序后的版本，而不实际改变或重置原始数据--用computed和filter返回过滤值便可

<li v-for="fa of fas">{{fa}}</li>
data () (
    return { num:[1,2,3,4] }
},
computed:{
    fa () {
        return this.num.filter(function (num) {
            return num > 3
        })
    }
}

在计算属性不适用的状况下 (例如，在嵌套 v-for 循环中) 你可使用一个方法： 传参给循环对象,methods展现返回

<li v-for="n in even(mum)">{{ n }}</li>  v-for能够接受一个有参函数
methods : {
    even (num) {
        retun this.num.filter(function (num) {
            return num > 3
        })
    }
}

9.v-if 与 v-for 同时使用
当v-if与v-for处于同一级时 v-for的优先级比v-if高
这意味着 v-if 将分别重复运行于每一个 v-for 循环中
当你只想为部分项渲染节点时，这种优先级的机制会十分有用，以下：
<li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
</li>
上面的代码将只渲染未完成的 todo。

***10: props
    传递静态或动态 Prop:

    --------静态传一个props:
    <el-html tis="你哈"></el-html>//你哈
    Vue.component('el-html',{
        props:{
            tis:{
                type:String
            }
        }
    template:'<h2>{{tis}}</h2>'
});

    ------动态传一个props:
    <el-html :tis="txt"></el-html>//ppp
    Vue.component('el-html',{
        props:{
            tis:{
                type:String
            }
        }
    template:'<h2>{{tis}}</h2>'
});
data(){
    return {
       txt:'ppp'
    }
}

------传入一个对象和数组
 <list-si 
        :name="{ name1:'qqq', name2:'eee' }"
        age="[1,2,3]"
        ></list-si>
        
        Vue.component('list-si',{
            props:{
                name:{
                    type:Object
                }
            }
            props:['age']

            template:'<h4>{{name.name1}} {{age[0}}</h4>' //qqq 1
        });
        

        
    
    ================================================================   
    
        
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <div class="list">
        <ol>
            <to-list :item = "list" v-for="list in lists"></to-list>
            <!-- to-list是父组件，将经过bind绑定一个值item,子组件li经过props接受 -->
        </ol>  

        <div v-html="res" :title="oop + 'ppo'"></div>
        <p>{{lop + lop}}</p>
        <!-- <p>{{ ok ? 'YES' : 'NO' }}</p> -->
        <p>{{lop+str.split('')}}</p>
        <!-- <p v-if="fs">fff</p> -->
        <h3 v-on:click="fs = !fs">ffrf</h3>
        <p v-if="fs">{{shows}}</p>
        <!-- 绑定一个disabled只要值不为空 就是true -->
        <li :disabled = "lop">{{res}}</li>  

        <button v-on:[event].prevent = 'evenFun'>回值</button>
        <div :[namesAtr]="url">fff</div>

         computed:

         <p>{{wwws()}}</p> //调用方法返回值
         <p>{{wwws}}</p> //表明返回的computed计算值

         计算属性有缓存：计算属性是基于它们的响应式依赖进行缓存的;只在相关响应式依赖发生改变时它们才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。
         <div>{{datas}}</div>
         <div>{{datas2()}}</div>

         <div>{{js}}</div>
         <div>{{gets}}</div>

         watch:观察和响应 Vue 实例上的数据变更：侦听属性
        <!-- <div>{{ fullName }}</div> -->

        class style绑定：  
        <li class="active1" v-bind:class="{active:actives,active2:actives2}">actives</li>
        <li v-bind:class="cd">cds</li>//对象class
        <li v-bind:class="bd">bds</li>//绑定一个返回对象的计算属性含的class

        <!-- 数组绑定class -->
        <li v-bind:class="[on,on1,on2]">on1</li>
        <li v-bind:class="[on ? on1 : on2]">on</li> //据条件切换列表中的 class，能够用三元表达式
        <div v-bind:class="[{ active: isActive }, errorClass]"></div>//当有多个条件 class 时这样写有些繁琐。因此在数组语法中也可使用对象语法：
        <!-- 绑定style -->
        <li :style="{fontSize:aco + 'px'}">嗯嗯嗯</li>
        <li :style="styles">this is fangsi</li>
        <!-- v-for索引 键 -->
        <li v-for="(ins,key,index) of inss">{{ins}} {{key}} {{index}}</li>

        Vue 不能检测如下数组的变更：
        
        当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
        当你修改数组的长度时，例如：vm.items.length = newLength
        举个例子：
        
        var vm = new Vue({
        data: {
        items: ['a', 'b', 'c']
        }
        })
        vm.items[1] = 'x' // 不是响应性的
        vm.items.length = 2 // 不是响应性的


Vue 不能检测对象属性的添加或删除：:::
        对于已经建立的实例，Vue 不容许动态添加根级别的响应式属性。可是，能够
        使用 Vue.set(object, propertyName, value)或者vm.$set()方法向嵌套对象添加响应式属性;


        JS：Object.assign()方法用于将全部可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
        Object.assign(target, ...sources);target: 目标对象 sources: 源对象
        var obj1 = {
        b:2,
        a:1
        }
        var obj2 = {
        c:3,
        d:4
        }  Object.assign(obj1,obj2);//obj2和obj1合并
为已有对象赋值多个新属性:::::
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})


    </div>  
    <script>
        Vue.component('to-list',{
            props:['item'],
            template:'<li>{{ item.text }}</li>'   
        });
        var vm = new Vue({  
            el:'.list',  
            data () {  
                return {
                    lists:Object.freeze([ //Object.freez阻止死对象被修改，也意味着响应系统没法再追踪变化。
                        {text:'1'},
                        {text:'2'}
                    ]),
                    text:'js',
                    res:'<li>JavaScript</li>', 
                    oop:'oop',
                    lop:'lop',
                    str:'java',
                    fs:true,
                    shows:'ppp',
                    url:'a.html',
                    event:"mouseleave", 
                    namesatr:'href',
                    actives:true,
                    actives2:true,
                    //对象class
                    cd : {
                        on : true,
                        ons : true
                    },  
                // 数组class
                    on: 'true', on1: 'true2', on2: 'true3',
                    aco:2,
                    styles:{
                        fontSize:'20px',
                        color:'red',
                        disPlay:'block'
                    },
                    inss:{
                        insss:'oo',
                        www:'ww',
                        eee:'ee'
                    }
                }
            },
            computed : {
               wwws () { return this.oop.split('').reverse().join(''); },
               datas () { return Date.now(); },
               js () { return Date.now() },
               gets: {
                   get () { // 默认是每一个计算属性计算时有get函数，能够进行缓存,在数据未发生变化时，优先读取缓存
                       return this.text + this.str
                   },
                    set() { //在设置时值触发
                       return this.text + this.str
                   }
               },
            //    绑定一个返回对象的计算属性含的class
               bd () { 
                    return {
                        active:'active',
                        en:'en'
                    }   
               }  
            },
            watch: {     
            },
            created () {
              console.log(this.text);
            },
            methods:{
                evenFun () {
                    alert(0);
                },
                wwws () {
                     return this.oop.split('').reverse().join('');
                },
                datas2 () {  
                    return Date.now()   
                }
            }
        });  
        console.log(vm.$el); //输出div
        // $data,$el,$watch 都是vm(实例)所拥有的方法或者属性
        vm.$data.oop = 'ui';
        vm.$data.str = 'kkk';
        vm.$set(vm.inss,'hu','pp');//使用 Vue.set(object, propertyName, value)或者vm.$set()方法向嵌套对象添加响应式属性; vm.$set是Vue.set的别名，二者功能同样
        vm.inss = Object.assign({},vm.inss,{
            k:'ee',
            l:'hh'
        });
    </script>    
</body>
</html> 

复制代码

~vue-router

（1） //首当其冲
   Vue.use(Router);
   export defalut new Router({
       routes:[
       {
           path:'/',
           name:'first',//此模板中使用router-view标签将要用的子页面(first-child)拿来,子路由的状况通常用在一个页面有他的基础模版，而后它下面的页面都隶属于这个模版，
           component:first,
       //主页中的子路由显示项
       children:[
        {
            path:'/first-child',
            name:''
        }
       ]
           
       }
       ]
       
   })
   （2）路由传参
       @经过router-link:to绑定所需参数向lonarui4传参：
        <router-link :to="{name:'lonarui4',path:'/lonarui4',params:{name1:'哈哈'}}">go to lonarui4</router-link>  在lonarui4模板中用{{$route.params.name1}}接受便可
        
       @经过点击事件用全局$router给地址路径追加（$router.push）值传参:
       <div @click="to_lonarui4"></div>
       export defalut {
           methods:{ 点击跳转传参
           to_lonarui4 () {
                                this.$router.push({
            name:'lonarui4',   用name来*识别*，保持与query一致性  或者用 path:'/lonarui4'
           params:{  //注意params有个坑————浏览器刷新会致使传的参数不存，将params换成query便可；这是因为query与params传参机制不同，形成的差别，若是要隐藏参数用params，若是强制刷新不被清除用query。
             page:'1',
             code:'00'
      }
    })
           }
           }
       }
       
       lonarui4页面接受：
       mounted(){
               console.log(this.$route.parmas.page);
                 console.log(this.$route.query.page);
       }
   
   @经过配置路由index.js来传参
    export defalut new Router({
       route:[
           {
               path:'/lonarui4/:id/:conts', 在url中用：“：字段”  配置参数
               //path:'/lonarui4/:id(\\d+)/:conts',//加入了正则，再传递数字以外的其余参数，组件就没有办法接收到。
               name:'lonarui4',
               component:lonarui4
           }
       ]
    });
   在主模板中 <router-link to="lonarui/目标id/内容"></router-link>
   在lonarui4模板中   用{{$route.params.id}}  {{$route.params.conts}}  接收
   （3）路由中的钩子函数
   beforeRouteEnter：在路由进入前的钩子函数。
  beforeRouteLeave：在路由离开前的钩子函数。
       三个参数：
           to:路由将要跳转的路径信息，信息是包含在对像里边的。
           from:路径跳转前的路径信息，也是一个对象的形式。
           next:路由的控制参数，经常使用的有next(true)和next(false)。
   {
     path:'/lonarui4/:lisId/:listTit',
     name:'lonarui4',
     component:lonarui4,
     beforeEnter:(to,from,next)=>{    若是使用钩子函数，对应要跳转的lonarui4所在的router-link会失效
       console.log('我进入了lonarui4模板');
       console.log(to);
       console.log(from);
       console.log(next);
     }
   },
   
  --------------------过渡---------------
   .fade-enter {
 opacity:0;
}
.fade-leave{
 opacity:1;
}
.fade-enter-active{
 transition:opacity .5s;
}
.fade-leave-active{
 opacity:0;
 transition:opacity .5s;
}
   <transition name="fade" class="fade-enter-active"> 
   <router-view></router-view> //加载子路由可设置过渡
   </transition>
   ** css过渡类名： ** 组件过渡过程当中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，好比name=”fade”,会有以下四个CSS类名：

   fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后马上删除。
   fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
   fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后马上删除。
   fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

-------------------配置404--------------------
{
   path:'*',  //这里的path:’*’就是找不到页面时的配置
   component:'Error'  //404页面
}
<router-link to="/b">瞎写的</router-link> 跳转找不到这个路径所示页面，启动Error页面
复制代码

~Vuex:

11.------------------------------vueX------------------------------------------------
 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，
    
  这个状态自管理应用包含如下几个部分：
  state，驱动应用的数据源；
  view，以声明方式将 state 映射到视图；
  actions，响应在 view 上的用户输入致使的状态变化。  
    
  每个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)
  
  Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation。这样使得咱们能够方便地跟踪每个状态的变化，从而让咱们可以实现一些工具帮助咱们更好地了解咱们的应用
    
例：
创建store.js,安装vuex
store.js::::
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {   //state存贮要公用的数据
    num:1,
    str:'qq'
}
const mutations = {  //mutations对存储的数据进行按需操做
    add (state) {
        state.num++
    },
    changStr (state) {
        console.log(state.str)
    }
    
    
    export defalut new VueX.Store{   导出全局的$store对象，以便各个模板使用
        state
    }
}

//模板中调用使用
<div>{{$store.state.num}}</div> 1
<span @click="$store.commit('add')">add+</span>  //用comit提交触发mutatons中函数
<span @click="$store.commit('changStr')">{{$store.state.str}}</span> qq
import store form '....'

1. 用computed获取store中的状态（state）值
(1)第一种方法：直接经过计算返回
computed:{
     getState () {
         return this.$store.state.num   //模板调用 <div>{{getSate}}</div>
     }
 }
 
 (2)第二种方法：经过mapState的对象来赋值
 先引入mapState  import {mapState} from 'vuex'
 computed:mapState(
    getState:state => state.num   //模板调用 <div>{{getSate}}</div>
 )
 (3)第二种方法：经过mapState的对象设置数组来获取state
  computed:mapState(["num"]),   //模板调用 <div>{{getSate}}</div>
 
 ---store.js:::
 const state = {   //state存贮要公用的数据
    num:1,
    str:'qq' 
}

*****可是呐：若是咱们须要在一个computed中处理不少个数据时，那这时就不能这样写了，由于一个模板中只能有一个computed起做用，那咋办嘛，用es6的扩展运算符便可：looK!

****computed:{
    ...mapState({
        getState:state => state.num
    }),
    ...mapState(["num"])   //这样写简单明了
}


2.Mutations修改state状态
  (1)$store.commit() 经过commit提交获得state值
    <span @click="$store.commit('add',n)">add+</span>  //用comit提交触发mutatons中函数  可传值n到mutations中
   const mutations = {
    add(state,n) {
     state.num+=n
    }
}
(2)使用mapMutations修改state状态
 先引入mapMutations import { mapState,mapMutations } from 'vuex';
     methods:mapMutations(
            ['add','reduce']
        )
        
        调用 <div> @click="add">{{$store.state.num}}</div>
    
  ******同computed同样，methods也只能在模板中出现一次，因此用扩展符：
  **methods:{
   ...mapMutations('add','reduce')
  }
  
  
  3.getters计算过滤操做
  
  有这样一个需求哈：从store中取值时，首先给所需值过滤操做，怎么实现？，因此vux提供了getters这个方法用于数据的过滤操做
  
  如今咱们对num预先操做下,让他每次更改值时，加10
  
  const state = {
      num:1
  }
  const getters = {
      num (state) {
        return state.num += 10  
      }
  }
  //export导出getters
  export default new Vuex.Store({
    state,mutations,getters
});

模板中调用:::
import {mapState,mapMutations,mapGetters} from 'vuex'
<p>{{num}}</p> //11
computed: {
    ...mapState(['num']),
    num () {
        return this.$store.$getters.num
    }
    //因为vux提供了mapGetters  因此像...mapState(['num'])能够用扩展符来写
    mapGetters(['num'])
    
}
4.actions异步修改状态
 actions和mutations的基本功能都同样，都是显示提交（commit）更改state状态，
 惟一不一样：actions是异步来调用修改mutations中定义的数据（数据在函数中）状态，而mutations是同步来修改state中的数据状态
//上码子：

    const = state {
        num:0
    }
    //用mutations同步更改state状态
   const  mutaions = {
       add(state,n) {//传参

           state.num += n
       }
   }
   
   用actions异步提交(commit)更改mutaions中的数据；
   context：上下文对象，这里你能够理解称store自己。
   {commit}：直接把commit对象传递过来，可让方法体逻辑和代码更清晰明了。
   const actions = {
    adds (contTxt) {
        contTxt.commit('add',10)  //调用store的commit方法提交进行更改状态
    }
    //更明了的写法
    adds ({commit}) {将store的commit方法直接以对象的形式做为形参，提供函数体调用修改mutiaons中的数据
        commit('adds',10)   
    }
   }
   
   import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
   export defalut new Vuex.Store({
       state,
       mutaions,
       getters,
       actions
   });
   //在模板中调用
   <div @click="adds">{{num}}</div>   //点击后  10
   
  export defalut {
    computed : {
        ...mapstate([num])
    },
    methods : {
        ...mapActions(['adds'])
    }
  }
  
  
  5.module（状态管理器的模块组）
  随着项目的复杂性增长， 共享的状态愈来愈多，这时候咱们就须要把咱们状态的各类操做进行一个分组，分组后再进行按组编写。
   
   const firstModlue = {
       state: {
           number:1
       },
       mutations: {
           adds (state) {
              state.number++
           }
       },
       getters: {
           number (state) {
               return state.number += 10 
           }
       },
       actions: {
           addsActions ({commit}) {
            commit('adds')
           }
       }
   }
    export defalut new Vuex.Store({
       modules: {
            first:firstModlue
       }
    });
    //模板中调用
    
    <div>{{$store.state.first.number}}</div>  //调用modules中的first状态组
    <div>{{number}}</div>
    
    computed: {
        ...mapState({
            number: state => this.$store.state.first.number  
        })
    }
  
复制代码

~vue axios

为何选择axios？
~使用axios能够统一作请求-响应拦截，例如响应时咱们将响应信息拦截起来，判断状态码，从而弹出报错信息
~设定请求超时,例如3000ms未响应则中止请求
~基于promise,能够很方便地使用then或者catch来处理请求
~自动转换json数据 Axios 是一个基于 Promise 的 HTTP 库，能够用在浏览器和 node.js 中;

它有如下特性：
~在浏览器中建立 XMLHttpRequests
~在 node.js 则建立 http 请求
~支持 Promise API
~支持拦截请求和响应
~转换请求和响应数据
~取消请求
~自动转换 JSON 数据
3 ~客户端支持防护 XSRF

1.在main.js导入：

import axios from 'axios'
//将axios赋值到原型上:
Vue.prototype.$ajax = axios
复制代码

2.模板中码子展现：

<style>
  img {width: 30px;}
</style>
<template>

  <div>
    <ul>
      <li v-for="(list,index) of lists" :key="list.id">
        <span>{{list.id}}</span>
        <i>{{list.name}}</i>
        <em>{{list.des}}</em>
      </li>
      <hr>
      <ul>
        <li v-for="good of goods">
        <span>{{good.t1}}</span>
        <span><img :src="good.t2"></span>
        <span>{{good.t3}}</span>
        </li>
      </ul>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists:[],
      goods:[],
      URL:{
        url1:"http://www.wujiaweb.com/api",
      },
      getAxios() {
      
      调用全局$ajax
        this.$ajax
          .get(this.URL.url1, { id: 1, name: "r" })
          .then(res => {
            let resResult = res.data.data;
            console.log(resResult);
            let _this = this;
            resResult.favourite_goods.forEach((val) => {
              _this.lists.push({
                id: val.goods_id,
                name: val.goods_name,
                des: val.goods_remark
              });
            });
             resResult.hot_goods.forEach((val) => {
               console.log(val);
               _this.goods.push(
                 {
                   t1:val.goods_sn,
                   t2:_this.URL.url1.substr(0,23) + val.original_img,
                   t3:val.goods_name
                 }
               )
             })
          },(error) => {
            console.log(error);
          }).catch(res => {
            console.log(res);
          });
      }
    };
  },
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      getUser();
      async function getUser() {
        try {
          const response = await _this.getAxios();
          console.log(response);
        } catch (error) {
          console.error(error);
        }
      }
    });
  }
};
</script>
复制代码

若是一次性要请求多个接口呢(执行多个并发请求)：
处理并发请求的助手函数：

axios.all(iterable)
axios.spread(callback)
复制代码

以下使用：

mounted () {
let _this = this;
     function get1() {
      return _this.$ajax.get("http://www.wujiaweb.com/api/goods/advertise");
    }
    function get2() {
      return _this.$ajax.get("http://www.wujiaweb.com/api/goods/category");
    }
    function get3() {
      return _this.$ajax.get("http://www.wujiaweb.com/api/cart");
    }
    _this.$ajax.all(
    [get1,get2,get3]
    ).then(
     _this.$ajax.spred(data1,data2,data3) { //经过sperd获得all中请求的接口，  data1等表明$ajax.all中的get
      let a = data1.data.data.filter(val => {  
          return val.ad_id > 70;
        });
        console.log(a);  
    }
    )
}

复制代码

请求方法的别名
为方便使用，官方为全部支持的请求方法提供了别名，能够直接使用别名来发起请求：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

在使用别名方法时， url、method、data 这些属性都没必要在配置中指定。
复制代码

通常在咱们实际项目中，都会封装一个全局的axios用于远程数据拉去，
为何要封装?
封装有助于全局使用，设置统一的请求拦截，有助于维护
来吧，码子展现

1.首先创建http.js文件
2.引入axios和qs,
3.设置拦截器，
4.按需设置要用的请求方法

import axios from 'axios'
import qs from 'qs'//序列化字符串，处理发送请求的参数  axios发送的数据不是json格式，若须要json格式，添加此库
axios.interceptors.response.use(response => { // 对响应数据作点什么
  return response.data
}, function (error) {
  console.log(error);
});
axios.interceptors.request.use(config => { // 对响应错误作点什么
  return config;
}, function (error) {
  return Promise.reject(error)
});

export default {
  // 全局token
  get(url, params) {
    return axios({
      method: 'get',
      url: url,
      params,
      withCredentials: true,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      }
    })
  },
  post(url, data) {
    return axios({
      method: 'post',
      url: url,
      data: qs.stringify(data),
      withCredentials: true,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      }
    })
  },
  form(url, formdata) {
    return axios({
      method: 'post',
      url: url,
      data: formdata,
      withCredentials: true,
    })
  },
  getJson(url) {
    return axios({
      method: 'get', 
      url: url
    })
  }
}

复制代码

5.在main.js 入口文件中引入http.js

import http from  './assets/js/http'
复制代码

6.模板中调用使用

mounted () {
    this.$http.post(
      'http://www.xuefu.com/data/student',
      {
          name:'_'
      }
    ).then(res => {
        console.log(res);
    }).catch(res => {})
}
复制代码

~vue面试题走你

https://mp.weixin.qq.com/s/7XOcnqDX4e3MWU9UY1bh3A