vue vue-resource 请求数据

import Vue from 'vue';
import App from './App.vue'; /*使用vue-resource请求数据的步骤 1、需要安装vue-resource模块， 注意加上 --save npm install vue-resource --save / cnpm install vue-resource --save 2、main.js引入 vue-resource import VueResource from 'vue-resource'; 3、main.js Vue.use(VueResource); 4、在组件里面直接使用 this.$http.get(地址).then(function(){ }) */ import VueResource from 'vue-resource';
Vue.use(VueResource); new Vue({
el: '#app',
render: h => h(App)
})

<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
首页组件 <button @click="getData()">请求数据</button> <hr>
<br> <ul>
<li v-for="item in list"> {{item.title}}
</li>
</ul>
</div> </template> <script> /* 请求数据的模板 vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp
*/ export default{
data(){
return { msg:'我是一个首页组件msg',
flag:true,
list:[]
}
},
methods:{ getData(){
//请求数据 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.get(api).then((response)=>{
console.log(response); //注意this指向 this.list=response.body.result; },function(err){ console.log(err); }) }
},
mounted(){ /*生命周期函数*/ this.getData(); } } </script> <style lang="scss" scoped> /*css 局部作用域 scoped*/ h2{ color:red
} </style><template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
首页组件 <button @click="getData()">请求数据</button> <hr>
<br> <ul>
<li v-for="item in list"> {{item.title}}
</li>
</ul>
</div> </template> <script> /* 请求数据的模板 vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp
*/ export default{
data(){
return { msg:'我是一个首页组件msg',
flag:true,
list:[]
}
},
methods:{ getData(){
//请求数据 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.get(api).then((response)=>{
console.log(response); //注意this指向 this.list=response.body.result; },function(err){ console.log(err); }) }
},
mounted(){ /*生命周期函数*/ this.getData(); } } </script> <style lang="scss" scoped> /*css 局部作用域 scoped*/ h2{ color:red
} </style>