第十三课 axios请求数据
Home.vue
<template>
<!-- 通过URL api拿到接送数据并做页面展示 -->
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
首页组件
<button @click="getData()">请求数据</button>
<hr>
<br>
<ul>
<li v-for="item in list">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
/*
请求数据的模板
axios 的使用
1、安装 cnpm install axios --save
2、哪里用哪里引入axios
*/
import Axios from 'axios';
export default{
data(){
return {
list:[]
}
},
methods:{
getData(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
Axios.get(api).then((response)=>{
this.list=response.data.result;
}).catch((error)=>{
console.log(error);
})
}
},
mounted(){ /*生命周期函数*/
this.getData();
}
}
</script>
<style lang="scss" scoped>
/*css 局部作用域 scoped*/
h2{
color:red
}
</style>
App.vue
<template>
<!-- 通过URL api拿到接送数据并做页面展示 -->
<div id="app">
<v-home></v-home>
</div>
</template>
<script>
import Home from './components/Home.vue';
export default {
data () {
return {
msg:'你好vue'
}
},
components:{ /*前面的组件名称不能和html标签一样*/
'v-home':Home,
}
}
</script>
<style lang="scss">
</style>
