vue.js配合$.post从后台获取数据简单demo分享


Posted in Javascript onAugust 11, 2018

首先导入

<script type="text/javascript" src="/island/stage/js/vue.min.js"></script>

html样式:

<div id="main-content" class="wrap-container zerogrid">


<article id="news_content" v-for="item in items">
<div class="col-1-2 right">
<img :src="item.coverimage"/><!--img标签与src之间需要有空格-->
</div>
<div class="col-1-2 left">
<a class="art-category left" href="#" rel="external nofollow" rel="external nofollow" >{{item.releasetime}}</a>
<div class="clear"></div>
<div class="art-content">
<h2>{{item.title}}</h2>
<div class="info">
<a href="#" rel="external nofollow" rel="external nofollow" >{{item.author}}</a>
</div>
<div class="line"></div>
<p>{{item.content}}</p>
<a v-bind:href="['/island/stage/newscontent.html?id='+item.id]" rel="external nofollow" class="more">阅读全文</a> <!--属性数据绑定以及拼接-->
</div>
</div>
</article>

<!-- 循环结束(新闻) -->
</div>

js部分:

var vm = new Vue({
  el: '#main-content',
  data: {
  items : []
  }, //end data
  created:function(){
  $.post("/island/stage/queryOneAllNews.do",{"categoryid":parseInt(categoryid)},function(data){
  vm.items = data;
  });//end post
  } //created
 }); //end vue

注意:返回的json数组 并不需要JSON.stringify(data) 转成json字符串 items 这里需要的是json对象

当然 官网上推荐的是使用axios npm这种方式。

以上这篇vue.js配合$.post从后台获取数据简单demo就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 打印内容方法小结
Nov 04 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 #Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 #Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 #Javascript
微信小程序滑动选择器的实现代码
Aug 10 #Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 #Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 #Javascript
You might like
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
详解python UDP 编程
2020/08/24 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
自我评价范文分享
2014/01/04 职场文书
新品发布会主持词
2014/04/02 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Python函数式编程中itertools模块详解
2021/09/15 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
Golang 遍历二叉树
2022/04/19 Golang