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

首先导入

<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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue中post方式提交数据后台无法接收的问题

    最近用vue做项目,遇到ajax提交值的问题. 用post方式提交,后台无法接收到值.百度了半天,各种解决方式都有,下载中间件之类的,都试了. 最后咨询大牛才知道是数据没有序列化的问题. 下面是源码: 因为我没有使用箭头函数,所以需要在外面重新定义this,这样不太好,因为有时忘了的话就很尴尬了. 不过不知道为什么,我之前用 JSON.stringify( ) 完全没有效果. 改成 : var qs = require('querystring') qs.stringify(data) 就ok了

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • axios发送post请求springMVC接收不到参数的解决方法

    axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded. 解决方法有以下三种: 1.设置axios的默认请求头 //设置全局的 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; var instance = a

  • 详解解决使用axios发送json后台接收不到的问题

    问题描述 按照axios官网例子发起请求传递json,后台接受到的数据为空,一直卡在options阶段. 尝试的方法 开始以为是接口有问题,使用postman测试下,一切正常,百思不得其解,看了好多issue也解决不了,加了headers:{'content-type':'application/json'}也没用. 官网上是说,传json就按application/json进行处理,然而并没有卵用:之后套了一层JSON.stringify(data) ,content-type又变成表单格式了

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

    首先导入 <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="i

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • vue.js使用v-model指令实现的数据双向绑定功能示例

    vue.js使用v-model指令实现的数据双向绑定功能示例

    本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过

  • JQuery通过后台获取数据遍历到前台的方法

    做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用ul+li标签写的,在调用接口调试时发现返回的数据有很多组的,而在前台显示的时候只有一条数据,毋容置疑,一定是遍历时出现了问题,下面来简单分析下. 前台代码: 案例1: <div class="Record"> <div class="RecordLeft text-center fl"> <p><span>经办记录</sp

  • vue.js click点击事件获取当前元素对象的操作

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

  • 对python操作kafka写入json数据的简单demo分享

    如下所示: 安装kafka支持库pip install kafka-python from kafka import KafkaProducer import json ''' 生产者demo 向test_lyl2主题中循环写入10条json数据 注意事项:要写入json数据需加上value_serializer参数,如下代码 ''' producer = KafkaProducer( value_serializer=lambda v: json.dumps(v).encode('utf-8'

  • vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

    vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • vue如何从后台获取数据生成动态菜单列表

    vue如何从后台获取数据生成动态菜单列表

    目录 1.数据准备 2.选择组件 3.配置路由 4.不出问题这样就可以实现动态路由了 5.完整代码 1.数据准备 树形菜单基本数据很简单,只需要菜单id,菜单名称,路由地址,图标.下图中的节点id和父节点id是为了后端生成树形数据,只负责前端的话只需要拿到前面说的四个数据就行. 后端将数据转成树形结构,传给前端的数据结构如图 2.选择组件 我直接用element-ui的el-menu组件,结构是(这是用来注释的,完整代码在后面) <el-menu> <template v-for=&qu

  • Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时: 将input 框里面的值清空时: 重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <div

随机推荐