vue使用(三)
本节目标:获取后端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使用(三)的更多相关文章
- 一天带你入门到放弃vue.js(三)
自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...
- Vue省市区三级联选择器V-Distpicker的使用
Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...
- vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js 三种方式安装
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)
[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- 总结Vue第三天:模块化和webpack模块化打包:
总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...
随机推荐
- Ajax学习总结(1)——Ajax实例讲解与技术原理
摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...
- UVALive 7146 Defeat The Enemy
Defeat The Enemy Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Long long ...
- JavaScript数组的某些操作(二)
7.颠倒数组中元素的顺序(注意:不是为数组排序)--reverse方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 华为荣耀3C最新版ROM的root,(4.7.1和4.8.1等等通用方法)
手头一台honor 3c的机器.应该是线刷的时候,把IMEI给刷掉了.导致移动2G卡无法上网. 刷了4.7.1或者4.8.1.尝试了全部方法都root失败了. 正好我手头有6582的代码.我想.既然系 ...
- 九度 题目1154:Jungle Roads
题目描写叙述: The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid mon ...
- 最短路 spfa, dijkstra, Floyd
spfa #include <stdio.h> #include <queue> using namespace std; #define RANGE 101 #define ...
- ElasticSearch概述和定义
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- css3.0+html绘制六边形
<section class="ass_desc"> <section class="ass_descLeft posRe"> < ...
- 对 hiren bootcd 15.2 中的 XP 系统作了汉化, 同时支持中文输入法。提供下载
对 hiren bootcd 15.2 中的 XP 系统作了汉化, 同时支持中文输入法.提供下载 对该PE 中的 XP 系统作了汉化, 由于一个 中文字库 就要 10M 多:加之原系统过于精简,对中文 ...
- Linux下读写芯片的I2C寄存器
要想在Linux下读写芯片的I2C寄存器,一般需要在Linux编写一份该芯片的I2C驱动,关于Linux下如何编写I2C驱动,前一篇文章<手把手教你写Linux I2C设备驱动>已经做了初 ...