详解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针对DOM的应用分析(三)
Apr 15 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 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
php自动跳转中英文页面
2008/07/29 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
js模拟类继承小例子
2010/07/17 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
改进Django中的表单的简单方法
2015/07/17 Python
pandas值替换方法
2018/07/10 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python中sys模块是做什么用的
2020/08/16 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
模范教师事迹材料
2014/02/10 职场文书
抽样调查项目计划书
2014/04/24 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server