被迫学Vue——Axios异步通信

红太狼 2023-07-14 12:54 4阅读 0赞

首先伪造一个data.json

{
        
      "age": 20,
      "code": 0,
      "url": "www.123",
      "likes": {
        
          "name": "java",
          "age": 2
        }
    }

然后通过钩子函数进行axios网络通信，绑定data.json，并且将该数据响应给Vue对象里的data

<!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    </head>
    <body>
    <div id="vue">
        {
       {info.age}} <br>
        <a v-bind:href="info.url">点击</a> <br>
        {
       {info.likes.name}}
    </div>
    
    <script>
        var vm = new Vue({
         
            el: "#vue",
            data() {
         
                return {
         
                    info: {
          // 这里的属性值，要和json数据保持一致
                        age: null,
                        url: null,
                        likes: {
         
                            name: null,
                            age: null
                        }
                    }
                }
            },
            mounted(){
          // 钩子函数链式编程
              axios.get('data.json').then(response=>(this.info=response.data));
            }
        });
    </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlWmhpWWluZ18_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlWmhpWWluZ18_size_16_color_FFFFFF_t_70]: /images/20230529/ef676d52ca9c4db38abf00d7b0d6613d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 Axios异步通信

四.Axios异步通信 1 什么是Axios？ Axios是一个类库，基于Promise管理的HTTP 库，是前端通信框架，可以用在浏览器和 node.js

野性酷女/ 2024年03月30日 10:21/ 0 赞/ 57 阅读

相关服务异步通信--RabbitMQ

黑马- SpringCloud微服务技术栈项目中设计到的服务异步通信，项目部署成功，知识介绍全面。项目梳理 1. 知识点是按照集数依次整理，方便日后回来查找。 2

深碍√TFBOYSˉ_/ 2024年03月25日 11:40/ 0 赞/ 57 阅读

相关 Vue的Axios异步通信

Axios异步通信 > 官方文档：https://axios-http.com/zh/docs/intro > > github地址：https://github.co

朱雀/ 2023年09月30日 08:25/ 0 赞/ 1 阅读

相关被迫学Vue——Axios异步通信

首先伪造一个data.json { "age": 20, "code": 0, "url": "www.123"

红太狼/ 2023年07月14日 12:54/ 0 赞/ 5 阅读

相关 Vue笔记：Axios异步通信

文章目录 Axios异步通信什么是Axios 为什么要使用 Axios 第一个

朱雀/ 2022年12月10日 14:34/ 0 赞/ 126 阅读

相关单片机串口通信与同步异步通信

文章目录一、串口通信二、异步通信三、同步通信四、串行通信的传输方向一、串口通信 1、随着多微机系统

深藏阁楼爱情的钟/ 2022年11月06日 08:54/ 0 赞/ 224 阅读

相关 C#异步UDP通信

\[c-sharp\] [view plain][] [copy][view plain] 1. using System; 2. using System.Col

快来打我*/ 2022年09月18日 15:59/ 0 赞/ 195 阅读

相关串行通信里的异步通信与同步通信的区别

一、串行通信基本认识基本的通信方式有并行通信和串行通信两种。一条信息的各位数据被同时传送的通信方式称为并行通信。并行通信的特点是：各数据位同时传送，

朴灿烈づ我的快乐病毒、/ 2022年07月18日 11:56/ 0 赞/ 250 阅读

相关 C#Socket 网络通信异步处理

C\Socket 网络通信异步处理 SocketAsyncEventArgs 异步套接字操作 1.服务端简单实现： ![20170718184500218][] C

曾经终败给现在/ 2022年06月12日 07:15/ 0 赞/ 338 阅读

相关 C# Socket 同步通信与异步通信示例

同步 1.建立链接发送和获取信息异步 1.服务器端建立一个链接的监控等待 2.客户端建立一个与服务器同样地址和端口的Socket，发出链接请求 3.服务器端获得这个

缺乏、安全感/ 2022年05月15日 14:47/ 0 赞/ 221 阅读