vue之数据请求方式

1.vue-resource

2.axios

3.fetch-jsonp

一、vue-resource

1. 安装vue-resource

在项目根目录进行安装：cnpm install vue-resource --save

save说明：将此插件名插入到pachage.json文件中，别人在使用时，直接npm install，就会安装package.json里的所配置的软件插件名称了。

2.引入vue-resource

在main.js中引入这个插件，并使用这个插件

import VueResource from 'vue-resource'#引入插件，VueResource 是别名 ；vue-resource 是我们下载的插件
Vue.use(VueResource );
#使用插件

3.使用示例：

<template><div><p>vue-resource方式</p><button @click="getData()">resource</button><hr /><ul><li v-for="item in list">{{item.title}}</li></ul></div>
</template><script>export default {name: "app",data() {return {list:[]}},methods:{getData(){//请求数据var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';this.$http.get(api).then(function (response) {console.log(response)//注意this指向this.list = response.body.result;},function (err) {console.log(err)})}}}
</script>

结果：

二、axios

1.安装axios

在项目根目录进行安装：cnpm install axios --save

2.引入axios

在哪个.vue文件里使用就在哪里引入，例如我在App.vue里使用，就在App.vue里引入，注意要在script标签开始处引入。

import Axios from 'axios';

3.使用示例

<template><div><p>vue-resource方式</p><button @click="getData()">resource</button><hr /><ul><li v-for="item in list">{{item.title}}</li></ul></div>
</template><script>import Axios from 'axios';export default {name: "app",data() {return {list:[]}},methods:{getData(){//请求数据var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';Axios.get(api).then((response)=> {console.log(response);this.list = response.data.result;}).catch((error)=>{console.log(error);})}}}
</script>

结果：

三、fetch-jsonp

1.安装

在项目根目录进行安装：cnpm install fetch-jsonp --save

2.引入

在哪个.vue文件里使用就在哪里引入，例如我在App.vue里使用，就在App.vue里引入，注意要在script标签开始处引入。

3.使用示例

<template><div><p>vue-resource方式</p><button @click="getData()">resource</button><hr /><ul><li v-for="item in list">{{item.title}}</li></ul></div>
</template><script>import FetchJsonp from 'fetch-jsonp';export default {name: "app",data() {return {list:[]}},methods:{getData(){//请求数据var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';FetchJsonp(api).then((response)=>{return response.json()}).then((json)=>{console.log('parsed json',json)this.list = json.result;}).catch((ex)=>{console.log('parsing failed',ex)})}}}
</script>

结果：

vue之数据请求方式相关推荐

Vue 发送数据请求
这边是将我之前开发的一个项目开发记录进行分享一下吧,可能写的不是很好,毕竟还只是一个在校生.只能说还是一个新手小白的开发记录吧. 有需要的可以借鉴一下,有问题哈哈也欢迎指出,毕竟发现问题才能更好的进 ...
Vue完成数据请求后内容超出显示省略号+显示查看全文按钮
需求: 如下图,当Vue完成数据请求后,根据文章内容设置显示方式.10行以内的显示全文,不显示[查看全文]按钮:内容超过指定行数时,超出内容隐藏,末尾显示省略号并显示[查看全文]按钮. 实现思路在 ...
axios的数据请求方式及跨域
express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问数据的请 ...
vue（数据请求）框架
数据请求使用JS编写ajax 局部提交,请求回来的是josn数据,而且在js当中,数据渲染问题很复杂 const xhr = new XMLHTTPRequest() xhr.open(" ...
vue 动态数据请求
写在前面的话: 很多时候,页面的数据是从前端向后端发起请求获取的,下面是最近用的方法: 1. axios: 详细的用法参考: axios中文说明或者英文的说明注明:axios不支持jso ...
数据请求方式Fetch
一.前言在前后端分离项目中,前端请求后端接口得到后端数据,完成页面内容的渲染或功能状态的判断,已经成为常规操作.那么,关于前端如何请求后端接口获取并解析数据,主要有哪些方式呢: 1. 刷新页面:最直 ...
uniapp ajax数据库查询,uniapp小程序登录、数据请求方式
index页面手动授权按钮 exportdefault{ data() {return{ imgInfo:"",//头像 nickName:""//昵称 } ...
【vue页面数据请求进度条--页面爱心--借助插件实现页面防抖-echarts实现自适应】
1.页面爱心点击出现随机颜色小爱心它是一个js文件实现的我们首先创建一个love.js文件,然后把下面代码拿过去并导出 export function love() {;(function (w ...
Android为TV端助力 post带数据请求方式，传递的数据格式包括json和map
如下: public static String httpPost(String url, String json) { try { URL u = new URL(url); HttpURLConn ...

vue之数据请求方式

vue之数据请求方式

一、vue-resource

1. 安装vue-resource

2.引入vue-resource

3.使用示例：

二、axios

1.安装axios

2.引入axios

3.使用示例

三、fetch-jsonp

vue之数据请求方式相关推荐

最新文章

热门文章