本节目标:获取后端api数据

需求:一个按钮,点击之后将服务器上的数据获取到,并显示出来

方法一:

1. 准备工作,

(1)安装官方插件

vuedemo02>npm install vue-resource --save

save的作用是将引入的包坐标加入到package.json中去,

(2)在main.js中加入

()import VueResource from 'vue-resource'
()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使用(三)的更多相关文章

  1. 一天带你入门到放弃vue.js(三)

    自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...

  2. Vue省市区三级联选择器V-Distpicker的使用

    Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...

  3. vue.js 三种方式安装--npm安装

    Vue.js是一个构建数据驱动的 web 界面的渐进式框架.     Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合.     ...

  4. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  5. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  6. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  7. vue.js 三种方式安装

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  8. 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)

    [Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809

  9. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  10. 总结Vue第三天:模块化和webpack模块化打包:

    总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...

随机推荐

  1. PHP解析XML格式文档

    <?php// 首先要建一个DOMDocument对象$xml = new DOMDocument();// 加载Xml文件$xml->load("3.xml");// ...

  2. Spring Cloud学习笔记【三】服务消费者Feign

    Feign 是一个声明式的 Web Service 客户端,它的目的就是让 Web Service 调用更加简单.它整合了 Ribbon 和 Hystrix,从而让我们不再需要显式地使用这两个组件.F ...

  3. Androidbutton事件的五中写法总结

    button事件的五中写法: 1.匿名内部类 2.类实现View.OnClickListener接口 3.创建实例化接口对象 4.使用内部类 5.自己定义方法,配置Android:onclick属性 ...

  4. Java编程思想(四) —— 复用类

    看了老罗罗升阳的专訪,不由自主地佩服,非常年轻,我之前以为和罗永浩一个级别的年龄.也是见过的不是初高中编程的一位大牛之中的一个,专訪之后.发现老罗也是一步一个脚印的人. 别说什么难做,做不了.你根本就 ...

  5. Scala学习之爬豆瓣电影

    简单使用Scala和Jsoup对豆瓣电影进行爬虫,技术比較简单易学. 写文章不易,欢迎大家採我的文章,以及给出实用的评论,当然大家也能够关注一下我的github:多谢. 1.爬虫前期准备 找好须要抓取 ...

  6. Think Pad笔记本分区解决思路及方法

    Think pad笔记本分区解决思路及方法       近日好友拿着新买的Thinkpad X300过来找我,说这个笔记本只有一个分区,所有的东西不得放在C盘,希望再多分出几个分区.抱怨原先在wind ...

  7. OpenCV —— 图像局部与分割(二)

    分水岭算法 将图像中的边缘转化成“山脉”,将均匀区域转化为“山谷” 分水岭算法首先计算灰度图像的梯度,这对山谷或没有纹理的盆地(亮度值低的点)的形成有效,也对山头或图像中没有主导线段的山脉(山脊对应的 ...

  8. pip 更新安装失败解决方法

    python3 -m ensurepip https://stackoverflow.com/questions/28664082/python-no-module-pip-main-error-wh ...

  9. WPF通用框架 数据库结构

    前言 由於技術轉型, 目前大部分工作都是WPF為主, 但是趨於如今想在網絡上找一套能夠滿意的WPF權限管理框架太難, 因為WinForm那時候是有一套改寫過的權限框架, 所以數據庫設計這塊已經有了一個 ...

  10. softInputMode- 软件盘的设置

    今天遇到一个问题,就是软件盘弹出来以后,会把之前的布局界面整个的挤到屏幕的外面,而且按下返回建以后,这个软件盘占据的空间会留下一个黑色的背景.在网上查找了很多的方法,刚开始都是说,如下方法 <a ...