NO.7_网络通讯(第三方模块)_Axios_ajax
修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<!-- 如果上述地址失效，实验不成功，则需要更换CDN源或者手动下载文件并引用 -->
</head>
<body>
<!-- 这是View 现在就是templet模板-->
<div id="app">
{{ getdata }}
</div>
<!-- 这是Model -->
<script>
var vm = new Vue
(
{
el: '#app',
data:
{
getdata:'',
},
mounted()
{
axios.get('/data.json').then
(
response=>
(
console.log(response.data)
// 注意.data才是数据
)
);
axios.get('/data.json').then(response=>(this.getdata = response.data));
},
// 注意如果是vscode要安装插件Live Server开启HTTP服务
// 注意如果是vscode要安装插件Live Server开启HTTP服务
// 注意如果是vscode要安装插件Live Server开启HTTP服务
}
);
</script>
</body>
</html>
修改data.json
{
"name": "Vue + FastAPI",
"age": "18",
"address":
{
"street": "Tianhe",
"city": "Guangzhou",
"country": "China"
}
}
9425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
