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

vue引入链接

javascript 复制代码
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

axios引入链接

javascript 复制代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

简单事例

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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文件

javascript 复制代码
{
  "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/"
    }
  ]

}
相关推荐
武昌库里写JAVA44 分钟前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
jjw_zyfx8 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷10 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱056712 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.12 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding12 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥12 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信12 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化