详解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 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
javascript 一些用法小结
Sep 11 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
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
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
J2EE包括哪些技术
2016/11/25 面试题
手术室护士自我鉴定
2013/10/14 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB