本节目标:获取后端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. C++中父类的虚函数必需要实现吗?

    一.情景 C++中父类的虚函数必需要实现吗? class Vir{ public: virtual void tryVirtual(); }; class CVir:public Vir{ publi ...

  2. 什么是PV和UV?

    技术角度 1个PV是指从浏览器发出一个对网络server的Request,网络server接到Request之后.会開始把该Request相应的一个Page(Page就是一个网页)发送到client的 ...

  3. jquery源码01---(2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理

    // optionsCache : { 'once memory' : { once : true , memory : true } } var optionsCache = {}; // once ...

  4. Vue绑定事件

    <!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> ...

  5. C#结构函数

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. Ajax缓存原理

    一.什么是Ajax缓存原理? Ajax在发送的数据成功后,会把请求的URL和返回的响应结果保存在缓存内,当下一次调用Ajax发送相同的请求时,它会直接从缓存中把数据取出来,这是为了提高页面的响应速度和 ...

  7. OpenCV —— 轮廓

    把检测出的边缘像素组装成轮廓  ——  cvFindContours OpenCV 使用内存存储器来统一管理各种动态对象的内存.内存存储器在底层被实现为一个有许多相同大小的内存块组成的双向链表 内存储 ...

  8. SQL 金额添加千分位

    SELECT CONVERT(NVARCHAR(50),CAST(1000000 AS MONEY),1) SELECT CONVERT(NVARCHAR,CAST(1343432432434.8 A ...

  9. ZJOI2005沼泽鳄鱼

    矩阵优化dp ** 注意:矩阵乘法没有交换律 ** 思路:类比P2151hh去散步 代码特点在一维的答案矩阵 1.矩阵优化两点间方案数不必赘述 2.注意2,3,4可以办到以他们的lcm为周期,正是因为 ...

  10. mktemp---创建暂存文件