Vue的異步渲染axios問題
Vue異步渲染axios
首先我們要知道axios不是vue裡面的。
axios是一個基於Promise的，發送http請求的一個工具庫，並不是vue中的第三方插件，使用時不能通過“Vue.use()”安裝插件，需要在原型上進行綁定。
axios異步跟jquery中ajax其實是一樣的，功能相同，不過獲取到數據以後渲染的難易程度不同讓axios更加突出，jquery需要不停的操作dom元素進行渲染，而axios利用Vue進行渲染，其中的方便就大幅度展現出來瞭。
首先用Springboot實現一下簡單的axios異步請求以及渲染。
點擊事件觸發，將獲取的數據進行渲染。
<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發起異步請求
axios是vue中專門用來發起異步請求的庫，可以理解為python中的requests庫，java中的rest-assured庫。
1.安裝axios
cnpm install axios -S
2.使用
axios.get(url):發起請求.then():請求成功需要做的事.catch():請求失敗需要做的事
要修改data()中的屬性，此處用箭頭函數來指定this對象，否則，this.xxx修改的是.then()中的function對象。
1.往往我們可以把這類api的請求都封裝到一個api.js文件中：
2.使用的地方導入：
真實項目中的使用
1.封裝api.js,將axios請求的多個接口封裝好
2.在組件的created或者mounted或者methods中向後端發起axios請求，得到數據
3.將得到的數據賦值給組件的data()中的屬性，組件再在模版<template></template>中渲染，展示給前端。
總結
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。