<!DOCTYPE html>
<html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-cloak 解决闪烁问题-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="vue">
<div>地名：{{info.name}}</div>
<div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
<div>链接：<a v-binf:href="info.url" target="_blank">{{info.url}}</a> </div>
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#vue",
//data：属性：vm
data(){
return{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
url:null
}
}
},
mounted(){//钩子函数
axios
.get('../data.json')
.then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
vue-first.zip
需积分: 0 145 浏览量
2022-08-31
00:49:01
上传
评论
收藏 15KB ZIP 举报
vue-first.zip （23个子文件） 
vue-first chapter-1 
demo7.html 615B demo12.html 860B demo17.html 1KB demo2.html 398B demo14.html 842B demo8.html 687B demo1.html 464B demo13.html 644B demo11.html 530B demo5.html 562B demo4.html 539B demo16.html 679B demo15.html 490B demo6.html 528B demo3.html 666B demo10.html 528B demo9.html 494B .idea 
vue-first.iml 344B misc.xml 179B modules.xml 277B workspace.xml 22KB inspectionProfiles Project_Default.xml 550B data.json 591B
评论0