Vue学习笔记04Axios应用程序(使用axios实现异步通信)

最新推荐文章于 2023-08-14 10:56:48 发布

Jatine

最新推荐文章于 2023-08-14 10:56:48 发布

阅读量329

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/122530396

版权

前端专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

- Vue学习笔记04Axios应用程序
- - 什么是axios

Vue学习笔记04Axios应用程序

什么是axios

Axios是一个开源的可以用在浏览器端和Node]S的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建XMLHttpRequests
从node.js 创建http请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

创建data.json，模拟JSON数据

{
  "name": "百度",
  "url": "http://www.baidu.com",
  "page": 66,
  "isNonProfit": true,
  "address": {
    "street": "海淀区",
    "city": "北京市",
    "country": "中国"
  },
  "links": [
    {"name": "Google",
      "url": "http://www.google.com"
    },
    {"name": "Baidu",
      "url": "http://www.baidu.com"
    },
    {"name": "Sougou",
      "url": "http://www.sougou.com"
    }
  ]
}

创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Axios应用程序</title>
</head>
<body>
<div id="app">
    <div>
        名称：{{info.name}}
    </div>
    <div>
        url：{{info.url}}
    </div>

</div>
    <script>
        var app = new Vue({
            //element的缩写，挂载元素
            el:"#app",
            data(){
                return{
                    info:{
                        name:'',
                        url:''
                    }
                }
            },
            //请求数据
            mounted(){
                //链式编程
                axios
                .get('data.json')//获取数据
                .then(response => this.info = response.data)
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
添加数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Axios应用程序</title>
</head>
<body>
<div id="app">
    <div>
        名称：{{info.name}}
    </div>
    <div>
        url：{{info.url}}
    </div>

    <!--添加数组-->
    <ul>
        <li v-for="link in info.links">
            {{link.name}}--->{{link.url}}
        </li>
    </ul>

</div>
    <script>
        var app = new Vue({
            //element的缩写，挂载元素
            el:"#app",
            data(){
                return{
                    info:{
                        name:'',
                        url:'',
                        links:[]
                    }
                }
            },
            //请求数据
            mounted(){
                //链式编程
                axios
                .get('data.json')//获取数据
                .then(response => this.info = response.data)
            }

        })
    </script>
</body>
</html>

使用a标签，点击跳转百度页面
将

    <div>
        url：{{info.url}}
    </div>

改为：

    <div>
        <!--使用a标签,点击跳转页面-->
        url：<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
    </div>

运行示例：
在这里插入图片描述
点击跳转：

Jatine

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记04Axios应用程序(使用axios实现异步通信)

文章目录Vue学习笔记04Axios应用程序Vue学习笔记04Axios应用程序在这里插入代码片
复制链接

扫一扫

专栏目录