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 相关文章推荐
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
简单实现node.js图片上传
Dec 18 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
微信小程序支付前端源码
Aug 29 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
关于element的表单组件整理笔记
Feb 05 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
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
JavaScript触发器详解
2007/03/10 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python中的random()方法的使用介绍
2015/05/15 Python
Python MD5加密实例详解
2017/08/02 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
小学信息技术教学反思
2014/02/10 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
初三学生个人自我评定
2014/04/06 职场文书
旅游安全协议书
2014/04/21 职场文书
实习单位鉴定评语
2014/04/26 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
党支部工作总结2015
2015/04/01 职场文书
周末问候语大全
2015/11/10 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL