vue利用axios來(lái)完成數(shù)據(jù)的交互
axios基于 Promise 的 HTTP 請(qǐng)求客戶端，可同時(shí)在瀏覽器和 node.js 中使用
現(xiàn)在Vue官方推薦的網(wǎng)絡(luò)通信庫(kù)不再是vue-resource了，推薦使用axios。所以學(xué)習(xí)了下，總結(jié)如下。
一、功能特性
1、在瀏覽器中發(fā)送 XMLHttpRequests 請(qǐng)求
2、在 node.js 中發(fā)送 http請(qǐng)求
3、支持 Promise API
4、攔截請(qǐng)求和響應(yīng)
5、轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
6、自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
7、客戶端支持保護(hù)安全免受 XSRF 攻擊
二、axios的安裝方法（官方給了3種方法）
1、npm安裝
$ npm install axios
2、bower安裝
$ bower install axios
3、直接使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
三、安裝步驟
這里我使用npm的方法步驟：
①首先在npm中輸入npm install axios
②在main.js加上配置
import axios from ‘a(chǎn)xios' Vue.prototype.$http = axios
四、請(qǐng)求實(shí)例
點(diǎn)擊獲取數(shù)據(jù)可以取到想要的數(shù)據(jù)
<template>
<div class="tabbar">
<p>首頁(yè)</p>
<button v-on:click = 'goback'>獲取數(shù)據(jù)</button>
<div class="new_wrap" v-for="items in item">
<div class="newcard">
<div>
<p>{{items.issuer_nickname}}.</p>
</div>
<div>
{{items.title}}
</div>
<div class="pic">
<img :src="items.cover">
</div>
</div>
<br>
</div>
</div>
</template>
<script>
export default {
name: 'tabbar',
data () {
return {
msg: 'Welcome to Your Vue.js App',
item: []
}
},
methods:{
goback:function(){
console.log('hah');
this.$http.get('url') //把url地址換成你的接口地址即可
.then(res => {
//this.request.response = res.data
this.item = res.data.data.item; //把取item的數(shù)據(jù)賦給 item: []中
console.log(res.data.data.item);
if (res.data.code == '0') {
console.log('haha');
}else{
alert('數(shù)據(jù)不存在');
}
})
.catch(err => {
alert('請(qǐng)求失敗');
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
*{margin: 0;padding: 0;}
@function torem($px){//$px為需要轉(zhuǎn)換的字號(hào)
@return $px / 100px * 1rem; //100px為根字體大小
}
ul{
width: 100%;
position: absolute;
bottom: 0;
li{
width: torem(187.5px);
float:left;
height: torem(98px);
text-align:center;
background: #ccc;
}
}
img{
width: torem(200px);
height: torem(200px);
}
</style>
效果圖：
參考網(wǎng)址：https://github.com/axios/axios
總結(jié)
以上所述是小編給大家介紹的vue利用axios來(lái)完成數(shù)據(jù)的交互，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
webpack如何打包一個(gè)按需引入的vue組件庫(kù)
在vue項(xiàng)目開(kāi)發(fā)中,我們會(huì)將經(jīng)常用到的邏輯或模塊抽象成組件,對(duì)于那些多個(gè)項(xiàng)目都有用到的組件,可以考慮封裝成組件庫(kù),這篇文章主要給大家介紹了關(guān)于webpack如何打包一個(gè)按需引入的vue組件庫(kù)的相關(guān)資料,需要的朋友可以參考下2022-02-02
手動(dòng)掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法
在VUE應(yīng)用中,經(jīng)常會(huì)使用一些非vue實(shí)現(xiàn)的js庫(kù),這些js庫(kù)可能要求外部傳入一些界面DOM節(jié)點(diǎn),本文主要介紹了手動(dòng)掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法,感興趣的可以了解一下2024-08-08
.sync修飾符算是Vue的所有修飾符中較難理解的一個(gè)，本篇文章就帶你走近.sync的世界，深入理解后會(huì)發(fā)現(xiàn)，其實(shí)也就那么回事。修飾符和指令息息相關(guān)，下面從指令 ->修飾符->.sync修飾符由淺入深地來(lái)講解 .sync的含義及用法。2021-05-05
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例
這篇文章主要介紹了動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
最近公司項(xiàng)目中頻繁會(huì)使用到table表格,而且前端技術(shù)這一塊也用到了vue3來(lái)開(kāi)發(fā),所以基于element plus table做了一個(gè)二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue中濫用watch帶來(lái)的問(wèn)題以及如何解決,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue引入靜態(tài)js文件的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
在組件中增加的css加了scoped屬性之后,就在會(huì)在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下2023-01-01