使用Axios实现异步通信需要先导入cdn：

<script src="https://unpkg.com/axios@1.4.0/dist/axios.min.js"></script>

使用到的数据data.json

{

  "name":"kuang" ,

          "url":"https://www.bilibili.com/?spm_id_from=333.788.0.0",

  "page": 1,

  "isNonProfit": true,

  "address": {

    "stress": "寒光",

    "city": "西安",

    "country": "中国"

  },

  "links": [

{

  "name": "bilbil",

  "url": "https://ss"

},

{

"name": "bilbil",

"url": "https://ss"

},

{

"name": "badu",

"url": "https://baidu"

}

    ]

  }
对axios异步通信的理解：先展示文本数据，再动态加载数据，二者不同步。
<!--   
例如如果网络卡顿会先展示纯文本
“{{info.name}}
{{info.address.stress}}
点我”
然后在接收到数据后自动加载(无需刷新网页)json格式数据中键的值
     -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="vue" v-clock>

<!--    axios实现异步通信：

例如如果网络卡顿会先展示纯文本

{{info.name}}

{{info.address.stress}}

点我

然后在接收到数据后自动加载(无需刷新网页)json格式数据中键的值

       -->

    <div>{{info.name}}</div>

    <div>{{info.address.stress}}</div>

    <a v-bind:href="info.url">点我</a>

</div>

<script src="https://unpkg.com/axios@1.4.0/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script type="text/javascript">

    var vm=new Vue({

        el:"#vue",

        data(){

          return{

              info:{

                  name:null,

                  address:{

                      stress:null,

                      city:null,

                      country:null

                  },

                  url:null

              }

          }

        },

        mounted(){//钩子函数

            axios.get('../data.json').then(response=>(this.info=response.data));

        }

    });

</script>

</body>

</html>

最终在浏览器展示的结果：

总结：异步通信axios，与ajax类似，通过先在网页放置文本格式数据，再动态加载出数值格式数据，无需刷新网页

Vue 异步通信Axios的更多相关文章

  1. vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

    vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...

  2. Vue框架axios请求（类似于ajax请求）

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  3. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  4. vue 中axios 的基本配置和基本概念

    axios的基本概念及安装配置方法   ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...

  5. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  6. vue中axios的安装和使用

    有很多时候你在构建应用时需要访问一个 API 并展示其数据.做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种. 安装包:如果没有安装cnpm ...

  7. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  8. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  9. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  10. 基于vue配置axios

    转载地址:https://juejin.im/post/5a02a898f265da43052e0c85 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求 ...

随机推荐

  1. arc145前三题

    为什么只有前三题呢...第四题想了一个小时没思路(主要是半个小时的时候发现看错题了),然后看粉兔博客发现要用Cantor集一类的神奇玩意,手贱看了E题发现还是线性基.于是就run了.NOIP前再学吧 ...

  2. Bitcask — 日志结构的快速 KV 存储引擎

    Bitcask 介绍 Bitcask 是一种高性能的键值存储引擎,基于日志结构和哈希索引来提供高速的读写操作和数据持久性,适用于处理大量写入请求和快速查找键值对的应用场景. 核心概念 Bitcask ...

  3. IntelliJ IDEA 下载安装及配置使用教程（图文步骤详解）

    前言 壹哥在前面的文章中,带大家下载.安装.配置了Eclipse这个更好用的IDE开发工具,并教会了大家如何在Eclipse中进行项目的创建和代码编写.运行.但是实际上,在各种IDE开发工具中,Ecl ...

  4. Mybatis # 与 $ 符号区别

    一.区别 1.不同点: 以#{}方式传入参数,预编译时,它会将sql中的#{}替换为?,然后编译sql时,会把值两端加上 双引号.有效防止sql注入,保证数据安全. sql注入:通过把SQL命令插入到 ...

  5. 关于ul点击事件委托给li时的鼠标拖动问题

    网上查看后发现Click可以被两个事件触发:mouseUp与mouseDown,即点击和松开时都会触发一次. 随后当我从一个li点击拖动到其他li松开时,触发的事件对象因为冒泡变成了父元素ul,并非我 ...

  6. Java数据类型、标识符

    目录 JavaSE 标识符 数据类型 基本数据类型 引用数据类型 转义字符 JavaSE 标识符 定义 Java中用于定义名称的都是标识符.例:包名,类名,变量名,方法名等. 组成 由数字.字母._. ...

  7. vue之头像管理思路

    思路是在vant库中使用插件将上传的头像转码存入数据库中.每个用户存一个,不同用户就有不同的头像了.若数据库中没有头像,那么就给一个默认头像 头像上传后端接口: var express = requi ...

  8. 游戏AI——GOAP技术要点

    目录 什么是GOAP(Goal-Oriented Action Planning) 介绍 细节 难点与挑战 世界表达 具体类型表示 字符串表示 bool转化为枚举 规划器 Regoap流程 Middl ...

  9. [CTF学习笔记]net-pack(WinShark)

    题目:shark on wire 1 Description We found this packet capture. Recover the flag. 思路 这里懂得了winshark的一些基本 ...

  10. 利用NGINX搭建部署直播流媒体服务器

    直播如今是一个老生常谈的问题,怎么用于直播,大多数人只晓得,大佬某平台直播软件,点击开始即可直播.那么如何来搭建一个简易的直播平台呢?仅仅是有直播功能,没有涉及转码以及播放软件. 安装nginx以及r ...