Vue的異步渲染axios問題
Vue異步渲染axios
首先我們要知道axios不是vue里面的。
axios是一個(gè)基于Promise的，發(fā)送http請(qǐng)求的一個(gè)工具庫，并不是vue中的第三方插件，使用時(shí)不能通過“Vue.use()”安裝插件，需要在原型上進(jìn)行綁定。
axios異步跟jquery中ajax其實(shí)是一樣的，功能相同，不過獲取到數(shù)據(jù)以后渲染的難易程度不同讓axios更加突出，jquery需要不停的操作dom元素進(jìn)行渲染，而axios利用Vue進(jìn)行渲染，其中的方便就大幅度展現(xiàn)出來了。
首先用Springboot實(shí)現(xiàn)一下簡單的axios異步請(qǐng)求以及渲染。
點(diǎn)擊事件觸發(fā)，將獲取的數(shù)據(jù)進(jìn)行渲染。
<div id="box">?
? ? ?<span>{{name}}</span>
? ? <input type="button" v-on:click="ss">
</div>
?
<script type="text/javascript">
? ? new Vue({
? ? ? ? el:"#box",
? ? ? ? data:{
? ? ? ? ? ? name:'李佳琪'
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? ss:function (){
? ? ? ? ? ? ? ? axios.get("/boot1/123").then(response=>(this.name=response.data))
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>這里在簡單說一下，thymeleaf中的路徑引用
引入外部文件的寫法。
?<link rel="stylesheet" type="text/css" th:href="@{/css/ss.css}" rel="external nofollow" />
? ? <script th:src="@{/js/vue.js}" type="text/javascript" charset="utf-8"></script>
? ? <script th:src="@{https://unpkg.com/axios/dist/axios.min.js}"></script>Vue axios發(fā)起異步請(qǐng)求
axios是vue中專門用來發(fā)起異步請(qǐng)求的庫，可以理解為python中的requests庫，java中的rest-assured庫。
1.安裝axios
cnpm install axios -S
2.使用
axios.get(url):發(fā)起請(qǐng)求.then():請(qǐng)求成功需要做的事.catch():請(qǐng)求失敗需要做的事
要修改data()中的屬性，此處用箭頭函數(shù)來指定this對(duì)象，否則，this.xxx修改的是.then()中的function對(duì)象。
1.往往我們可以把這類api的請(qǐng)求都封裝到一個(gè)api.js文件中：
2.使用的地方導(dǎo)入：
真實(shí)項(xiàng)目中的使用
1.封裝api.js,將axios請(qǐng)求的多個(gè)接口封裝好
2.在組件的created或者mounted或者methods中向后端發(fā)起axios請(qǐng)求，得到數(shù)據(jù)
3.將得到的數(shù)據(jù)賦值給組件的data()中的屬性，組件再在模版<template></template>中渲染，展示給前端。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js雖然說是數(shù)據(jù)驅(qū)動(dòng)頁面的，但是有時(shí)候我們也要獲取dom對(duì)象進(jìn)行一些操作。這篇文章主要給大家介紹了關(guān)于vue第一次獲取不到元素的解決方法，需要的朋友可以參考下2021-06-06
vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡易音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Vue項(xiàng)目中使用fontawesome圖標(biāo)庫的方法
fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫,主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對(duì)應(yīng)的圖標(biāo)庫,無須全部下載,對(duì)vue?fontawesome圖標(biāo)庫相關(guān)知識(shí)感興趣的朋友一起看看吧2023-12-12
vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡單方法(無廢話版本)
ue動(dòng)態(tài)路由(約定路由),聽起來好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡單方法,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue如何從后臺(tái)下載.zip壓縮包文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue數(shù)據(jù)字典取鍵值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了Vue.component的屬性說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03