这里写目录标题
1.结合Axios使用
请求接口
https://autumnfish.cn/api/joke/list?num=6
通过mounted（）钩子函数请求数据并且展示数据data()
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
mounted () {
axios.get('https://autumnfish.cn/api/joke/list?num=6').then(response=>(this.info = response))
},
data () {
return {
info: null
}
}
})
展示在盒子中
<div id="app">
<li v-for="item in info.data.jokes">{
{
item}}</li>
</div>
结果：
2.结合template使用并展示
1.自定义模板：
Vue.component("jianghua",{
props: ["joker"],
template: '<li>{
{joker}}</li>'
})
2.完成钩子函数中的网络通信
var vm2 = new Vue({
el:"#app2",
mounted () {
axios.get('https://autumnfish.cn/api/joke/list?num=6').then(response=>(this.info = response))
},
data () {
return {
info: null
}
}
})
3.完成盒子中的数据绑定
<div id="app2">
<ol>
<jianghua v-for="item in info.data.jokes" v-bind:joker="item"></jianghua>
</ol>
</div>
4.展示数据
