vue使用
Posted kw28188151
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用相关的知识,希望对你有一定的参考价值。
本节目标:获取后端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); }) }
以上是关于vue使用的主要内容,如果未能解决你的问题,请参考以下文章