vue中cdn引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!DOCTYPE html>
<meta charset="UTF-8" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-bind="http://www.w3.org/1999/xhtml">
<title>Title</title>
<style>
<!--解决闪烁问题 属性选择器、在没有加载之前 白屏-->
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--view层 模板-->
<div id="app" v-cloak>
<p>{{info.code}}</p>
<p>{{info.date}}</p>
<p>{{info.ciba}}</p>
<img v-bind:src="info.imgurl">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//data: 属性 ----是属于vm的
data(){
return{
//请求的返回参数格式,必须和json字符串一样
info:{
code: null,
date: null,
ciba: null,
imgurl: null
}
}
},
mounted(){//钩子函数,链式编程,ES6新特性
axios.get('https://api.ooopn.com/ciba/api.php').then(respones=>(this.info=respones.data))
}
});
</script>
</body>
</html>
网页测试更改网络速度