vue2.0-官方插件vue-resource请求数据方式
vue2.0-官方插件vue-resource请求数据方式
1、官方安装vue-resource请求插件
参考：https://vuejs.bootcss.com/v2/guide/plugins.html
d:\vuejs\vuejs\vuedemo>cnpm install vue-resource --save 安装
cnpm install vue-resource --save （--save即时写入package.json文件）
查看官网组件，
在main.js文件中导入，
2、测试访问链接地址：
访问，mounted，刷新页面是加载。
3、源代码：
Home.vue配置文件，
<template>
<div class="hello">
<button @click="getData()">请求数据</button>
<br>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'home-component',
data () {
return {
aaa: '我是一个首页组件',
flag:true,
list:[]
}
},
methods:{
getData(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=12&page=1';
this.$http.get(api).then((response)=>{
console.log(response);
//注意this指向
this.list=response.body.result;
},function(err){
console.log(err);
})
}
},
mounted(){ /*生命周期函数,mouted-页面加载即可刷新界面*/
this.getData();
}
}
</script>
<style scoped>
h2{
color: red;
}
</style>
============================================
第二个demo
$ cnpm install vue-resource --save 安装组件
在main.js引入组件
<template>
<div>
<div v-if="!repoUrl">loading</div>
<div v-else>most star is <a :href="repoUrl">{{repoName}}</a></div>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
export default {
data () {
return {
repoUrl: '',
repoName: ''
}
},
mounted () {
// 发ajax请求获取数据
const url = `https://api.github.com/search/repositories?q=vue&sort=stars`
this.$http.get(url).then( response => {
//成功了
const result = response.data
//得到最受欢迎的repo地址
const repoRepo = result.items[0]
this.repoUrl = repoRepo.html_url
this.repoName = repoRepo.name
},
reponse => {
//错误处理
alert('resquest is failier')
}
)
}
}
</script>
