14.Vue3.x中全局绑定属性、使用Axios和fetchJsonp请求真实api接口数据、函数防抖实现百度搜索

一、Vue3.x中使用Axios请求远程真实Api接口数据

https://github.com/axios/axios

1. 安装

   npm install axios --save
   或者
   yarn add axios
   或者
   cnpm install axios --save
   

2. 引入使用

   <template>
       <div class="home">
           <button @click="getData">News组件获取数据</button>
           <ul>
               <li v-for="(item,index) in list" :key="index">
                   {
       { item.aid }}--{
       { item.title }}
               </li>
           </ul>
       </div>
   </template>
   
   <script>
       // import axios from 'axios';
       export default {
         
           name: "",
           data() {
         
               return {
         
                   list: []
               }
           },
           methods: {
         
               getData() {
         
                   let api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=5";
                   this.Axios.get(api).then((response) => {
         
                       console.log(response.data.result);
                       this.list = response.data.result;
                   }).catch((error) => {
         
                       console.log(error);
                   })
               }
           },
           mounted() {
         
               this.Storage.set("username", "张三111");
               console.log(this.Storage.get("username"));
           }
       }
   </script>
   
   <style scoped>
   
   </style>
   
   
   

二、Vue3.x全局绑定Axios

vue3.x中全局绑定属性参考https://v3.vuejs.org/api/application-config.html#warnhandler

修改项目入口main.js文件

import {createApp} from 'vue'
import App from './App.vue'
import A