Vue的異步渲染axios問題
Vue異步渲染axios
首先我們要知道axios不是vue里面的。
axios是一個基于Promise的，發(fā)送http請求的一個工具庫，并不是vue中的第三方插件，使用時不能通過“Vue.use()”安裝插件，需要在原型上進(jìn)行綁定。
axios異步跟jquery中ajax其實是一樣的，功能相同，不過獲取到數(shù)據(jù)以后渲染的難易程度不同讓axios更加突出，jquery需要不停的操作dom元素進(jìn)行渲染，而axios利用Vue進(jìn)行渲染，其中的方便就大幅度展現(xiàn)出來了。
首先用Springboot實現(xiàn)一下簡單的axios異步請求以及渲染。
點擊事件觸發(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ā)起異步請求
axios是vue中專門用來發(fā)起異步請求的庫，可以理解為python中的requests庫，java中的rest-assured庫。
1.安裝axios
cnpm install axios -S
2.使用
axios.get(url):發(fā)起請求.then():請求成功需要做的事.catch():請求失敗需要做的事
要修改data()中的屬性，此處用箭頭函數(shù)來指定this對象，否則，this.xxx修改的是.then()中的function對象。
1.往往我們可以把這類api的請求都封裝到一個api.js文件中：
2.使用的地方導(dǎo)入：
真實項目中的使用
1.封裝api.js,將axios請求的多個接口封裝好
2.在組件的created或者mounted或者methods中向后端發(fā)起axios請求，得到數(shù)據(jù)
3.將得到的數(shù)據(jù)賦值給組件的data()中的屬性，組件再在模版<template></template>中渲染，展示給前端。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue點擊自增和求和的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧2023-10-10
Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決
這篇文章主要介紹了Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決,文章通過圖文結(jié)合的方式給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
相信大部分兄弟都體驗過Vite了,都知道它很快,在學(xué)習(xí)的時候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關(guān)于Vite常見配置選項的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決
這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了Vue.js實現(xiàn)對視頻預(yù)覽的示例代碼,通過監(jiān)聽文件選擇事件和使用FileReader API,可以實現(xiàn)視頻文件的預(yù)覽功能,感興趣的可以了解一下2025-01-01
這篇文章主要介紹了vue3實現(xiàn)動態(tài)路由及菜單,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了el-form錯誤提示信息手動添加和取消,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
Vue的watch偵聽器格式有兩種：方法格式和對象格式的偵聽器，這篇文章主要介紹了Vue watch 偵聽對象屬性相關(guān)知識,需要的朋友可以參考下2023-04-04
Vue配合iView實現(xiàn)省市二級聯(lián)動的示例代碼
本篇文章主要介紹了Vue配合iView實現(xiàn)省市二級聯(lián)動的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07