Vue的异步渲染axios问题

目录
  • Vue异步渲染axios
  • 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>中渲染，展示给前端。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入解读VUE中的异步渲染的实现

    接下来在本文里一起看看当数据变化时,从源码层面逐步分析一下触发页面的响应动作之后,如何做渲染到页面上,展示到用户层面的. 同时也会了解在Vue中的异步方法NextTick的源码实现,看一看NextTick方法与浏览器的异步API有何联系. 注意,本文涉及的Vue源码版本为2.6.11. 什么是异步渲染? 这个问题应该先要做一个前提补充,当数据在同步变化的时候,页面订阅的响应操作为什么不会与数据变化完全对应,而是在所有的数据变化操作做完之后,页面才会得到响应,完成页面渲染. 从一个例子体验一下异步

  • Vue服务端渲染实践之Web应用首屏耗时最优化方案

    随着各大前端框架的诞生和演变,SPA开始流行,单页面应用的优势在于可以不重新加载整个页面的情况下,通过ajax和服务器通信,实现整个Web应用拒不更新,带来了极致的用户体验.然而,对于需要SEO.追求极致的首屏性能的应用,前端渲染的SPA是糟糕的.好在Vue 2.0后是支持服务端渲染的,零零散散花费了两三周事件,通过改造现有项目,基本完成了在现有项目中实践了Vue服务端渲染. 关于Vue服务端渲染的原理.搭建,官方文档已经讲的比较详细了,因此,本文不是抄袭文档,而是文档的补充.特别是对于如何与现

  • Vue 同步异步存值取值实现案例

    1.vue中各个组件之间传值 1.父子组件 父组件–>子组件,通过子组件的自定义属性:props 子组件–>父组件,通过自定义事件:this.emit(′事件名′,参数1,参数2,...); 2.非父子组件或父子组件通过数据总数Bus,this.root.$emit('事件名',参数1,参数2,-) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1: 用组件之间通讯.这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕. 方法2: 我们定义全局变量.模块a的数据

  • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

  • vue.js,ajax渲染页面的实例

    关于上次说的用vue.js,zepto,node.js,webpack等技术重构CNode.这是一个比较入门的项目,一般你学完vue就可以上手了,CNode网站有公开的API所以你可以获取这个网站的所有数据接口,然后渲染到页面上,用CSS等加工一下就可以了.起初,我一直感觉好难好难好难,虽然说不出难在哪里,就感觉好难好难好难.让我细说,不就是用ajax获取数据,然后传到组件上渲染吗,再模仿着写样式不就好了吗.是不难啊,可是为什么我心里天然觉得很难呢? CNode是给了我们数据接口,ajax也就那

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • vue服务端渲染添加缓存的方法

    什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序. 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行. 缓存 虽然 Vue 的服务

  • vue 解决异步数据更新问题

    问题 记录一下出现的问题, 数据翻倍 这是复现问题的代码 data() { return { space: "", allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( "https://gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7

  • Vue使用预渲染代替SSR的方法

    页面渲染方式 前段时间了解到页面有几种渲染方式:SPA SSR,以前写的一个网站但是用的渲染方式是 SPA,导致搜索引擎爬虫抓不到任何信息,对 SEO 优化不很好,本想改成 SSR,但是改动配置很多,弄来弄去怕影响开发,今天在 Vue 官网看到预渲染,今天试了下,感觉是一个折中的方法,而且配置改动不大,大家可以试试 什么是服务器端渲染 (SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲

  • vue从后台渲染文章列表以及根据id跳转文章详情详解

    前言: vue里面怎样从后台渲染列表,怎么根据文章的id获取文章的具体内容.以及值与值之间的传递,vue-router 里query和params的区别及使用. 一.query和params 先来看看query和params是怎样传值和接收参数的吧!后面会用到的哦! (1)query方式传参和接收参数 query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数 传递参数:把数据发送出去 this.$router.push({ path:'/aaa/bbb/ccc', query:{ i

随机推荐