标签：body list one button 需求 turn app eth ios
本节目标：获取后端api数据
需求：一个按钮，点击之后将服务器上的数据获取到，并显示出来
方法一：
1. 准备工作，
（1）安装官方插件
vuedemo02>npm install vue-resource --save
save的作用是将引入的包坐标加入到package.json中去，
（2）在main.js中加入
(1)import VueResource from ‘vue-resource‘ (2)Vue.use(VueResource); 使用它
上面准备工作做完了，下来创建按钮、显示数据
<button @click="getMsg()">获取请求参数</button> <hr/> <ul> <li v-for="a in list"> {{a}} </li> </ul>
现在就可以使用它了
2.从后端获取参数（因为主要是练习获取，后端可以使用spring boot返回就是json，也比较简单和方便）
getMsg(){ /*请求参数*/ var api=‘http://www.phonegap100.com/appapi.php?a=getPortalList 1‘ 网上看到的连接，还可以获取到值，就复制过来了 this.$http.get(api).then( function(response){ console.log(response) this.list=response.body.message; },function(err){ console.log(err); }) }
现在就可以获取到值了。
方法二：
使用axios进行数据的获取
1.安装
npm install axios --save
2.哪里使用就在哪里引用
import Axios from ‘axios‘; export default { name: ‘demo08‘, data () { return { } },methods:{ getMsg() { var api = ‘http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1‘; Axios.get(api).then((response)=>{ console.log(response); }).catch(error=>{ console.log(error); }) } },mounted(){ } }
补充一点：
在书上看到说推荐使用下面这样的代码，一般不使用function作为方法使用
Axios.get(api).then((response)=>{ console.log(response); }).catch(error=>{ console.log(error); }) }
标签：body list one button 需求 turn app eth ios
原文地址：https://www.cnblogs.com/kw28188151/p/9195418.html
