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/"
    }
  ]

}
相关推荐
星星会笑滴14 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish36 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫54137 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.38 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普38 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King1 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
景天科技苑1 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星1251 小时前
前端预览pdf文件流
前端·javascript·vue.js
join81 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1251 小时前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf