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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
DIV菜单层实现代码
Nov 19 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JS 控件事件小结
Oct 31 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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解析RSS的方法
2015/03/05 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python多进程重复加载的解决方式
2019/12/13 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python中pyplot基础图标函数整理
2020/11/10 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
趣味活动策划方案
2014/02/08 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
乌镇导游词
2015/02/02 职场文书
法人代表资格证明书
2015/06/18 职场文书
子女赡养老人协议书
2016/03/23 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python