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 发展初期,代码简单地堆积在一起,只要 ...
随机推荐
- PHP解析XML格式文档
<?php// 首先要建一个DOMDocument对象$xml = new DOMDocument();// 加载Xml文件$xml->load("3.xml");// ...
- Spring Cloud学习笔记【三】服务消费者Feign
Feign 是一个声明式的 Web Service 客户端,它的目的就是让 Web Service 调用更加简单.它整合了 Ribbon 和 Hystrix,从而让我们不再需要显式地使用这两个组件.F ...
- Androidbutton事件的五中写法总结
button事件的五中写法: 1.匿名内部类 2.类实现View.OnClickListener接口 3.创建实例化接口对象 4.使用内部类 5.自己定义方法,配置Android:onclick属性 ...
- Java编程思想(四) —— 复用类
看了老罗罗升阳的专訪,不由自主地佩服,非常年轻,我之前以为和罗永浩一个级别的年龄.也是见过的不是初高中编程的一位大牛之中的一个,专訪之后.发现老罗也是一步一个脚印的人. 别说什么难做,做不了.你根本就 ...
- Scala学习之爬豆瓣电影
简单使用Scala和Jsoup对豆瓣电影进行爬虫,技术比較简单易学. 写文章不易,欢迎大家採我的文章,以及给出实用的评论,当然大家也能够关注一下我的github:多谢. 1.爬虫前期准备 找好须要抓取 ...
- Think Pad笔记本分区解决思路及方法
Think pad笔记本分区解决思路及方法 近日好友拿着新买的Thinkpad X300过来找我,说这个笔记本只有一个分区,所有的东西不得放在C盘,希望再多分出几个分区.抱怨原先在wind ...
- OpenCV —— 图像局部与分割(二)
分水岭算法 将图像中的边缘转化成“山脉”,将均匀区域转化为“山谷” 分水岭算法首先计算灰度图像的梯度,这对山谷或没有纹理的盆地(亮度值低的点)的形成有效,也对山头或图像中没有主导线段的山脉(山脊对应的 ...
- pip 更新安装失败解决方法
python3 -m ensurepip https://stackoverflow.com/questions/28664082/python-no-module-pip-main-error-wh ...
- WPF通用框架 数据库结构
前言 由於技術轉型, 目前大部分工作都是WPF為主, 但是趨於如今想在網絡上找一套能夠滿意的WPF權限管理框架太難, 因為WinForm那時候是有一套改寫過的權限框架, 所以數據庫設計這塊已經有了一個 ...
- softInputMode- 软件盘的设置
今天遇到一个问题,就是软件盘弹出来以后,会把之前的布局界面整个的挤到屏幕的外面,而且按下返回建以后,这个软件盘占据的空间会留下一个黑色的背景.在网上查找了很多的方法,刚开始都是说,如下方法 <a ...