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 浮点数运算 精度问题
Oct 06 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
vuex的简单使用教程
Feb 02 Javascript
axios post提交formdata的实例
Mar 16 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 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输出时间格式
2013/08/31 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
详解Python中for循环的使用方法
2015/05/14 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python中比较两个列表的实例方法
2019/07/04 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
公司联欢会策划方案
2014/05/19 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
会议开幕词
2015/01/28 职场文书
孟佩杰观后感
2015/06/17 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
python井字棋游戏实现人机对战
2022/04/28 Python
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python