详解Vue.js基于$.ajax获取数据并与组件的data绑定


Posted in Javascript onMay 26, 2017

Vue.js与jQuery不冲突???

在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的。
说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等。

然而,Vue.js和jQuery冲突吗???

答案显然是不冲突!!!

接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中。

创建Vue.js单文件组件

<template>
  <div>
    <div class="id">{{ret}}</div>
    <div class="id">{{data}}</div>
  </div>
</template>
<script>
  export default{
    name:'Test',
    data(){
      return{
        ret:'',
        data:''
      }
    },
    mounted(){
      this.$nextTick(()=>{
        var that=this;
        $.ajax({
          type:"get",
          url:"//wuanlife_api/index.php/Post/get_collect_post",
          data:{user_id:1},
          success:function(data){
            that.ret=data.ret;
            that.data=data.data;
          }
        })
      })
    }
  }
</script>
<style>
  .id{
    font-size: 25px;
    position: relative;
    left:50px;
    right:50px;
  }
</style>

json数据

{"ret":200,"data":{"page_count":1,"current_page":1,"posts":[]},"msg":null}

页面效果

详解Vue.js基于$.ajax获取数据并与组件的data绑定

在ajax获取数据后将获取到的数据绑定到组件对象的data上,就能完成数据的获取。

这样页面中就能正确的使用从服务器端获取的数据来渲染了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中top的作用深入剖析
Mar 04 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
js实现窗口全屏示例详解
Sep 17 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue.js获取数据库数据实例代码
May 26 #Javascript
详解通过JSON数据使用VUE.JS
May 26 #Javascript
JS中去掉array中重复元素的方法
May 26 #Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 #Javascript
AngularJS表单验证功能分析
May 26 #Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 #Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 #Javascript
You might like
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
全面了解python字符串和字典
2016/07/07 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
六一儿童节开幕词
2015/01/29 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
公司考勤管理制度
2015/08/04 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang