axios的cdn引入链接以及简单案例

vue引入链接

axios引入链接

简单事例


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
 
 
<div id="vue">
    <div>name:  {{info.name}}div>
    <div>address:   {{info.address.street}}div>
div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
    var vm = new Vue({
        el:"#vue",
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted(){
            axios.get("../data.json").then(response=>(this.info=response.data))
        }
    });
script>
html>

data.json文件


{
  "name":"狂神说java",
  "url":"https://www.bilibili.com/video/BV18E411a7mC?p=9&vd_source=e353ca887193f19a3d6ede4c86ed70b4",
  "page":1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country":"中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url":"https://www.bilibili.com"
    },
    {
      "name": "狂神说java",
      "url": "https://www.bilibili.com/video/BV18E411a7mC?p=9&vd_source=e353ca887193f19a3d6ede4c86ed70b4"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
 
}

相关阅读:
Taro + vue3 中微信小程序中实现拉起支付
Java安全框架(课时二十三)笔记内容十三
【LeetCode】HOT100
PostgreSQL常用的领域和用例
第17章 - 垃圾回收器
Three.js一学就会系列：01 第一个3D网站
Qt5.9.9交叉编译（带sqlite3、OpenSSL）
Solon 1.6.33 发布，更现代感的应用开发框架
代码审计-3 文件包含漏洞
DOTA-PEG-麦芽糖 maltose-DOTA 麦芽糖-四氮杂环十二烷四乙酸

原文地址：https://blog.csdn.net/yanweijie0317/article/details/133945360