Vue的异步渲染axios问题
更新时间：2023年03月24日 16:58:23 作者：LeeGaKi
这篇文章主要介绍了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>中渲染，展示给前端。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue.js虽然说是数据驱动页面的，但是有时候我们也要获取dom对象进行一些操作。这篇文章主要给大家介绍了关于vue第一次获取不到元素的解决方法，需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了vue实现图片滑动验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue实现简易音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
fontawesome的图标有免费版和专业版,本文主要使用free版本,一般free版本的图标够用,free图标又划分为三个图标库,主要有实心图标solid、常规图标regular及品牌图标brand,根据需求去下载对应的图标库,无须全部下载,对vue fontawesome图标库相关知识感兴趣的朋友一起看看吧2023-12-12
ue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue如何从后台下载.zip压缩包文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue如何实现简易的双向数据绑定，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue数据字典取键值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
element ui table（表格）实现点击一行展开功能
这篇文章主要给大家介绍了关于element ui table（表格）实现点击一行展开功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了Vue.component的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论