vue请求数据
vue-resource:
推荐教程:https://www.runoob.com/vue2/vuejs-ajax.html
1. 需要安装vue-resource模块, 注意加上 --save
npm install vue-resource --save / cnpm install vue-resource --save
2. main.js引入 vue-resource
import VueResource from 'vue-resource';
3. main.js
Vue.use(VueResource);
4. 在组件里面直接使用
this.$http.get(地址).then(function(res){ },function(err){
})
实例:
<template>
<div>
<h3>home组件</h3>
<button @click="addList()">加载</button>
<ul>
<li v-for="item in list">{{item.title}}</li>
</ul>
</div>
</template> <script>
export default {
name: "home",
data(){
return{
list:[]
}
},
methods:{
addList(){
//请求数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then((res)=>{
this.list = res.body.result;
},(err)=>{
console.log(err)
})
}
},
mounted() { //请求数据,操作dom可在这进行
console.log('模板编译完成4')
this.addList();
},
beforeCreate() {
console.log('实例刚刚被创建1')
},
created() {
console.log('实例已经创建完成2')
},
beforeMount() {
console.log('模板编译之前3')
}, beforeUpdate() {
console.log('数据更新之前')
},
updated() {
console.log('数据更新完毕')
},
beforeDestroy() {//页面销毁前报错数据
console.log('实例销毁之前')
},
destroyed() {
console.log('实例销毁完成')
}
}
</script> <style scoped> </style>
vue-resource 提供了 7 种请求 API(REST 风格):
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
axios:
1.安装
cnpm install axios --save
2.哪里使用那里引入
<template>
<div>
<h3>home组件</h3>
<button @click="addList()">加载</button>
<ul>
<li v-for="item in list">{{item.title}}</li>
</ul>
</div>
</template> <script>
import axios from 'axios'
export default {
name: "home",
data(){
return{
list:[]
}
},
methods:{
addList(){
//请求数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
axios.get(api).then((res)=>{
this.list = res.data.result;
}).catch((err)=>{
console.log(err)
})
}
},
mounted() { //请求数据,操作dom可在这进行
console.log('模板编译完成4')
this.addList();
},
}
</script> <style scoped> </style>
fetch:
https://github.com/camsong/fetch-jsonp
1.安装
cnpm install fetch-jsonp --save
addList(){
var $that = this
//请求数据
// //注意: 第一个.then 中获取到的不是最终数据,而是一个中间的数据流对象;
// 注意: 第一个 .then 中获取到的数据, 是一个 Response 类型对象;
// 注意: 第二个 .then 中,获取到的才是真正的 数据;
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
fetchJsonp(api,{
method:'get'
}).then(function (res) {
res.json().then((json)=>{
console.log(json)
$that.list = json.result;
})
}).catch(function (err) {
console.log('err',err)
})
}
vue请求数据的更多相关文章
- vue 使用 jsonp 请求数据
vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...
- 前端向服务器请求数据并渲染的方式(ajax/jQuery/axios/vue)
原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- vue vue-resource 请求数据
main.js import Vue from 'vue'; import App from './App.vue'; /*使用vue-resource请求数据的步骤 1.需要安装vue-resour ...
- vue 请求后台数据2(copy)
https://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://github.c ...
随机推荐
- 2018-5 - 凉经 - Mozilla Firefox Ltd - 前端工程师
北京谋智火狐信息技术有限公司(北京市东城区建国门华润大厦 17 层)过去面试的时候感觉电梯好神奇啊!一边的电梯是直达 18 层以上的,我按了 18 层准备到了再往下走一层,一个老司机和我说要做另一边的 ...
- windows 把ps/2 鼠标当成ps/2键盘了
真坑口阿 https://zhidao.baidu.com/question/425134865713508932.html 电脑的PS/2鼠标接口认成键盘了 电脑主板技嘉,只有一个PS/2接口.开始 ...
- Elasticsearch 安装head插件
一.简介 elasticsearch-head是一个界面化的集群操作和管理工具,可以对集群进行傻瓜式操作.你可以通过插件把它集成到es(首选方式),也可以安装成一个独立webapp. Elastics ...
- 【RequestContext】关于RequestContext的一些小心得
版权声明:随意转载,注明出处 https://blog.csdn.net/River_Continent/article/details/77511389后台传参,一直是一个比较重要的地方,如果涉及W ...
- Jenkins Html Rport 使用frame报错解决办法
对于Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow ...
- 一个JSON解析器
来源 <JavaScript语言精粹(修订版)> 代码 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Android专项测试监控资源
版本号 V 1.1.0 Android性能测试分为两类:1.一类为rom版本(系统)的性能测试2.一类为应用app的性能测试(本次主要关注点为app的性能测试) Android的app性能测试包括的测 ...
- 打印一个浮点数组,会输出字符串"Hello, world“ & 浮点数的二进制表示(IEEE 754标准)
#include <stdio.h> #include<stdlib.h> int main() { float a[3] = { 1143139122437582505939 ...
- Discrete Mathematics and Its Applications | 1 CHAPTER The Foundations: Logic and Proofs | 1.1 Propositional Logic
propositional variables (or statement variables), letters used for propositional variables are p, q, ...
- 【Linux开发】计算机底层是如何访问显卡的?
1. 显卡驱动是怎么控制显卡的, 就是说, 使用那些指令控制显卡, 通过端口么? 2. DirectX 或 OpenGL 或 CUDA 或 OpenCL 怎么找到显卡驱动, 显卡驱动是不是要为他们提供 ...