四、Vue CLI-異步請求（axios）

一、模塊的安裝

npm install axios --save
#--save可以不用寫

如圖：

 

二、配置main.js

import axios from 'axios'
Vue.prototype.$axios = axios;

如圖：

 

 三、簡單使用示例

頁面加載時執行：

<template>
    <div class="header">{{title}}</div>
</template>

<script>
    //當前組件的腳本
    export default{
        // 當前組件的名稱
        name:"test", //非必填項，則自動以文件名為主
        data(){
            return {//當前組件中所有的數據
                
                title:'貓眼電影'

            };
        },methods:{ //當前組件中所有的函數

            //普通的方法
            xx:function(){
                alert("調用普通方法");
            }

        },created()
        {
            window.console.log("頁面加載完畢之前執行，執行順序：父組件-子組件");
            this.xx();

        },mounted()
        {
            window.console.log("頁面加載完畢之前執行，執行順序：子組件-父組件");

        }
    }
</script>

<style>
    .header{
        height: 1.25rem;
        line-height: 2.5;
        background: #e54847;
        color: #fff;
        text-align: center;
        font-size: 0.5rem;
    }
</style>

點擊按鈕執行：

<template>
  <div>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {
      show: true,
      list: [1, 2, 3]
    };
  },
  methods: {
    handleClick: function() {
      this.show = !this.show;
    }
  }
};
</script>

異步請求的

 

 

 代碼如下：

<template>
  <div>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {
      show: true,
      list: [1, 2, 3]
    };
  },
  methods: {
    handleClick: function() {
      
       this.$axios({
            url: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101010100',  // 后台接口
            method: 'get',  // 請求方式
        }).then(response => {  // 請求成功
            window.console.log('請求成功');
            window.console.log(response.data);
            this.course_ctx = response.data;  // 將后台數據賦值給前台變量完成頁面渲染
        }).catch(error => {  // 請求失敗
            window.console.log('請求失敗');
            window.console.log(error);
        })

    }
  }
};
</script>

 四、路由跳轉與參數

可以使用 this.$router.push(location) 來更改url，完成跳轉

 代碼如下：

接受頁面：

<template>
<div>
    <div>Test2頁面</div>
    <div>{{this.$route.params.user}}</div>
    <button @click="write">打印接收的參數</button>
</div>
</template>
<script>
export default {
    name:"test2",
    data(){
        return {
            status:true
        }
    },
    methods:{
        write(){
            window.console.log(this.$route.params.user);
        }
    }
}
</script>
<style>
</style>

點擊跳轉頁面

<template>
  <div>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {
      show: true,
      list: [1, 2, 3]
    };
  },
  methods: {
    handleClick: function() {
      
 
            //this.$router.push('/test2')

            this.$router.push('/test2?user="wise"')    //接受頁面 this.$route.query.user 

            /*this.$router.push({
                name:'test2',
                params:{
                  user:"wise"
                }
            })*/


    }
  }
};
</script>