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}"/>
    <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>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue.js 3(简称 Vue3)是前端开发框架 Vue.js 的最新版本,它构建在 TypeScript 之上,提供了更好的性能、更简洁的 API 和更好的可维护性。Vue3采用了组件化的开发模式,使得代码更加模块化和易于复用。核心概念包括模板、指令、响应式系统和组件选项等。以下是Vue3的一些主要特点: 1. **TypeScript 支持**:Vue3原生支持TypeScript,这使得类型检查和开发者体验得到了提升。 2. **Composition API**:Vue3引入了新的API,如`setup()`函数,取代了options API,提供更简洁的声明式编程方式。 3. **Ref 和 Reactive API**:Reactive是Vue的核心特性,`ref`用于创建响应式的数据绑定,`reactive`用于创建完整的响应式对象。 4. **SSR(服务器渲染)和PWA(渐进式Web应用)支持**:Vue3对这两种现代开发趋势有良好的支持。 Axios 是一个基于 Promise 的 HTTP 库,用于浏览器和 Node.js 中处理 HTTP 请求。它设计轻巧,易于使用,并且能够在浏览器和 Node.js 环境下无缝工作。以下是 Axios 的一些关键特性: 1. **Promise 基础**:Axios返回的是一个Promise,使得异步请求的处理更为直观。 2. **拦截器**:提供请求前和请求后的拦截器,用于设置全局配置、请求头、错误处理等。 3. **转换器**:支持转换请求和响应数据,比如默认将JSON转换为JavaScript对象。 4. **Cancelable 请求**:可以取消正在执行的请求,方便处理用户操作或服务超时。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LeeGaKi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值