快捷導(dǎo)航

vue如何從接口請求數(shù)據(jù)

更新時間：2017年06月22日 09:46:07 作者：Kymming

本篇文章主要介紹了vue如何從接口請求數(shù)據(jù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這兩天學(xué)習(xí)了vue如何從接口請求數(shù)據(jù)，所以，今天添加一點小筆記。

<!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="http://cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>

  <script src="http://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: ''  //存數(shù)據(jù)接口        

      },

      created: function(){

        this.getImg()       //定義方法

      },

      methods: {

        getImg: function(){

          var that = this;    

          that.$http({      //調(diào)用接口

            method:'GET',

            url:this.getImgUrl //this指data

          }).then(function(response){ //接口返回數(shù)據(jù)

            this.imgList=response.data;             

          },function(error){

          })

        }

      }

    })

  </script>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue之頁面緩存問題(基于2.0)
本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
vue項目中mock.js的使用及基本用法
mockjs是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨立開發(fā)。這篇文章主要介紹了vue項目中mock.js的使用,需要的朋友可以參考下
2019-05-05
Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
如何使用Webpack優(yōu)化Vue項目的打包流程
在開發(fā)基于Vue.js的應(yīng)用時,隨著項目規(guī)模的擴大,單個文件的體積也會隨之增長,特別是當(dāng)涉及到大量的依賴庫和復(fù)雜的業(yè)務(wù)邏輯時,本文將詳細(xì)介紹如何使用Webpack來優(yōu)化Vue項目的打包流程,需要的朋友可以參考下
2024-09-09
vue如何搭建多頁面多系統(tǒng)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了vue搭建多頁面多系統(tǒng)應(yīng)用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
vue實現(xiàn)引入本地json的方法分析
這篇文章主要介紹了vue實現(xiàn)引入本地json的方法,結(jié)合實例形式分析了vue.js加載本地json文件及解析json數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
Vue配置代理(devServer)解決跨域問題
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問題,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-08-08
純前端使用Vue3上傳文件到minio文件服務(wù)器(粘貼可直接用)
vue是目前最流行的前端框架,下面這篇文章主要給大家介紹了關(guān)于純前端使用Vue3上傳文件到minio文件服務(wù)器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
圖片預(yù)覽插件vue-photo-preview的使用示例詳解
這篇文章主要介紹了圖片預(yù)覽插件vue-photo-preview的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-08-08
在Vue項目中引入Echarts繪制K線圖的方法技巧
在Vue項目開發(fā)中,數(shù)據(jù)可視化是一項重要的任務(wù),Echarts是一個由百度開源的數(shù)據(jù)可視化庫,提供了豐富的圖表類型和強大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢,本文將詳細(xì)介紹如何在Vue項目中引入Echarts并繪制K線圖,需要的朋友可以參考下
2025-04-04