vue如何从接口请求数据

这两天学习了vue如何从接口请求数据，所以，今天添加一点小笔记。

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>获取图片列表</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    

  </head>

  <body>

    <div id="app">

      <ul>

        <li>

          <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>

        </li>

      </ul>

    </div>    

  </body>

  <script src="https://cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>

  <script src="https://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>

  <script>

    var demo=new Vue({

      el:'#app',

      data: {

        imgList:[],

        getImgUrl: ''  //存数据接口        

      },

      created: function(){

        this.getImg()       //定义方法

      },

      methods: {

        getImg: function(){

          var that = this;    

          that.$http({      //调用接口

            method:'GET',

            url:this.getImgUrl //this指data

          }).then(function(response){ //接口返回数据

            this.imgList=response.data;             

          },function(error){

          })

        }

      }

    })

  </script>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue 配合vue-resource调用接口获取数据

    1.先用node+express+mysql简单配置一下后台 const express = require('express'); const mysql = require('mysql'); const static = require('express-static'); const db = mysql.createPool({ host: 'localhost', user: 'nodejs', password: 'nodejs', database:'resume', port:

  • vue如何从接口请求数据

    这两天学习了vue如何从接口请求数据,所以,今天添加一点小笔记. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取图片列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m

  • vue关于接口请求数据过大导致浏览器崩溃的问题

    vue关于接口请求数据过大导致浏览器崩溃的问题

    目录 关于接口请求数据过大导致浏览器崩溃 解决的方法也很简单 一行代码解决vue数据量大卡顿问题 关于接口请求数据过大导致浏览器崩溃 做vue后台的时候,有一个导出所有用户数据的需求,我这里是前端导出,用的是iview的exportCsv方法,在这里说说遇到的问题吧. 首先看这里,查询的时候,Size有155MB,最开始在谷歌.火狐之类的上面测试,一切正常,后来被提出在360浏览器里页面直接崩溃. 解决的方法也很简单 因为拿到后端传过来的数组后,赋值给了data里面的一个数组,即this.xxx

  • springboot+vue完成发送接口请求显示响应头信息

    springboot+vue完成发送接口请求显示响应头信息

    目录 基于 springboot+vue 的测试平台 一.后端实现 二.前端实现 1. 返回的数据放到 vuex 中 2. 从 vuex 中获取数据并展示 基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等辅助信息,今天完成这个功能的开发. 一.后端实现 后端主要是修改一下处理接口发送请求的方法apiTestRun,之前这个方法返回的直接就是一个响应体,现在修改成返回更多的内容. 如图所示,注释掉的部分

  • vue中实现先请求数据再渲染dom分享

    在项目中遇到了一个问题,下面是vue template中的代码: 我之前的写法是 这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到. 原因是并没有按照 请求数据->渲染dom->获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么) 后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是

  • Vue如何调用接口请求头增加参数

    目录 Vue调用接口请求头增加参数 Vue取消接口请求 接口js文件 页面中引用 总结 Vue调用接口请求头增加参数 import axios from 'axios' import qs from 'qs' let api_secret = '935bda53552e49cd56fc' // 基础配置 if (process.env.NODE_ENV === 'production') { // axios.defaults.baseURL = 'https://' //线上版本域名 // a

  • Vue生命周期activated之返回上一页不重新请求数据操作

    activated: 英文原意:使活动.触发 在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求 前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置 二.尝试 常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,

  • vue中promise的使用及异步请求数据的方法

    下面给大家介绍vue中promise的使用 promise是处理异步的利器,在之前的文章<ES6之promise>中,我详细介绍了promise的使用, 在文章<js动画实现&&回调地狱&&promise>中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对promise的进一步理解. 背景 进入商品页,商品页的左侧是分类,右侧是具体的商品,一旦进入商品页,就把所有分类的商品

  • vue接口请求加密实例

    1. 安装vue项目 npm init webpack project 2 安装iview npm i iview --save (这里是结合iview框架使用的 可根据自己的需求安装 当然也可以不安装) 3 在src目录下建一个utils文件夹 里面需要放5个js 都是封装好的js文件 功能不仅仅局限于加密 可以研究一下 你会学到很多东西 1.api.js /** * 为vue实例添加http方法 * Vue.use(http) */ import http from './http' exp

  • vue切换菜单取消未完成接口请求的案例

    vue切换菜单取消未完成接口请求的案例

    在做别的功能时 console里面总会报别的菜单接口里的错 看的很心烦 于是想优化一下 就有了这篇文章 在切换菜单的时候取消所有未完成接口的请求 1.找到自己的请求拦截器 重点是 config.cancelToken = global.store.source.token; http.interceptors.request.use(config => { config.cancelToken = global.store.source.token; return config }, err =

  • vue本地模拟服务器请求mock数据的方法详解

    vue本地模拟服务器请求mock数据的方法详解

    目录 原因 场景 方法 mock资源 配置 vue.config.js + settings.js .env.development + .env.production mock-request.js table.js mockDataTest 代码 总结 原因 1.mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了 2.mock的数据通过module.exports.export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,

随机推荐