最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐。
当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单、优美、自然,而且便于与在用的页面框架集成。
感谢vue.js的作者,官方网站地址:https://cn.vuejs.org
举个小例子。注意,代码中使用jQuery、bootstrap。没有用过bootstrap不影响阅读本文。
一、返回的JSON数据示例
[
{"playid":"12113c676a4e4aefac75d793910ea193",
"playname":"新建活动",
"startDate":"2017-01-01",
"guestNum":2,
"nickname":"wallimn",
"blog":"http://wallimn.iteye.com"}
]
二、网页代码
<table class="table table-bordered table-striped table-condensed" id="recentPlayTable">
<tr>
<th>名称</th><th>时间</th><th>人数</th>
</tr>
<tr v-if="loaded==false">
<td colspan="3" class="text-center">正在加载数据......</td>
</tr>
<tr v-else-if="items.length==0">
<td colspan="3" class="text-center">暂无数据</td>
</tr>
<template v-else>
<tr v-for="item in items">
<td>{{item.playname}}</td>
<td>{{item.startDate}}</td>
<td>{{item.guestNum}}</td>
</tr>
</template>
</table>
<script type="text/javascript">
var playTableVue = new Vue({
el:"#recentPlayTable",
data:{
items:[],
loaded:false
}
});
$(function (){
$.getJSON("JSON",{playid:'${play.playid}'},function(json){
if(!json)json=[];
playTableVue.items=json;
playTableVue.loaded=true;
});
});
</script>
分享到:
相关推荐
当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单、优美、自然,而且便于与在用的页面框架集成,本文给大家介绍Vue.js展示AJAX数据简单示例
主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据
但是使用Vue.js Ajax做到这一点非常简单。 您可以找到更多信息。 历史 历史记录功能可创建更快的浏览体验。 这意味着要加载的元素更少,因此浏览速度更快。 但是使用Vue.js Ajax做到这一点非常简单。 有一个详细的...
下面小编就为大家分享一篇ajax请求+vue.js渲染+页面加载的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例。Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-...
该模板是使用vue-cli 3构建的,具有Vuex,受Vue-router支持,并包含将Onsen UI与Vue.js和Yii2结合使用的示例,并具有在启用CSRF的情况下快速开发原生ajax驱动的应用程序的能力。 资产管理是通过npm完成的。目录结构...
主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下
从此改编的Flask + Vue.js示例应用程序。 特征 最小烧瓶1.0应用 API具有基于类的安全资源路由 入门级测试套件 +纱 用于后端通信 Vue样本 模板结构 该模板使用Flask和Flask-RestPlus创建最小的REST风格的API,让...
在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:...它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实
主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
nprogress Slim进度条基于Ajax'y应用程序的nprogress安装$ npm install vue-nprogress --save示例
vuejs示例:Vue.jsのサンプルをじゃんじゃんあげるよ
使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。 其主要功能是: 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 ...
response会交由Javascript处理 response内容仅可以为字符串 因此,Ajax本身无法触发浏览器的下载功能。 Axios拦截请求并实现下载 为了下载文件,我们通常会采用以下步骤: 发送请求 获得response 通过
Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。...-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 --> <!-- 提供这些功能以保持精简
使用formValidation.io向导(可用性)+ Vue.js(响应式)+ Keen Theme(UI)+ apexChart.js(图形生成)+ BlockUI(ajax加载块)+ BeautifulSoup4(Web Crawler)完成项目前端。后端使用python 3.7 + flask + ...
牢记服务器端验证的Vue表单组件关于FormVuelar是一组预定义的Vue表单组件,旨在自动实现所有具有服务器端验证的Vue表单组件关于FormVuelar是一组预定义的Vue表单组件,旨在自动显示错误从您的后端回来。 它提供了开...
vue的ssr服务端渲染示例详解 为什么使用服务器端渲染 (SSR) 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意,截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行...
vue 团队提供一个新的库文件叫做 vue-resource.js 。 网络CDN:https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js 1、用法分类 ajax 交互通常分为3类,get,post,jsonp html 部分的代码:数组myData 的...