詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定

更新時(shí)間：2017年05月26日 10:18:47 作者：敗給了憂傷

這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

Vue.js與jQuery不沖突？？？

在實(shí)際的應(yīng)用中，幾乎90%的數(shù)據(jù)是來源于服務(wù)端的，前端和服務(wù)端之間的數(shù)據(jù)交互一般是通過ajax請(qǐng)求來完成的。
說到ajax請(qǐng)求，第一反應(yīng)肯定想到了jQuery，項(xiàng)目中如果引入jQuery會(huì)幫助我們簡(jiǎn)化很多操作，簡(jiǎn)化DOM操作，ajax方法獲取后端數(shù)據(jù)等。

然而，Vue.js和jQuery沖突嗎？？？

答案顯然是不沖突?。?！

接下來會(huì)實(shí)現(xiàn)Vue.js組件中使用jQuery的ajax方法獲取服務(wù)器端數(shù)據(jù)并綁定至組件的data中。

創(chuàng)建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:"http://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數(shù)據(jù)

復(fù)制代碼代碼如下:

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

頁面效果

在ajax獲取數(shù)據(jù)后將獲取到的數(shù)據(jù)綁定到組件對(duì)象的data上，就能完成數(shù)據(jù)的獲取。

這樣頁面中就能正確的使用從服務(wù)器端獲取的數(shù)據(jù)來渲染了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

用vue寫一個(gè)日歷
這篇文章主要介紹了如何利用vue寫一個(gè)日歷，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-11-11
vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
在Vue.js中加載字體的正確方法
這篇文章主要介紹了在Vue.js中加載字體的正確方法,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下
2018-12-12
vue配置代理vue.config.js后不生效的解決(小坑)
這篇文章主要介紹了vue配置代理vue.config.js后不生效的解決(小坑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
記VUE3+TS獲取組件類型的方法踩坑及解決
這篇文章主要介紹了VUE3+TS獲取組件類型的方法踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
你不知道的Vue技巧之--開發(fā)一個(gè)可以通過方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個(gè)可以通過方法調(diào)用的組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)
hiprint 是一個(gè)web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動(dòng)端,PC端瀏覽器,angular,vue,react 等分頁預(yù)覽,打印,操作簡(jiǎn)單,運(yùn)行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進(jìn)行打印,需要的朋友可以參考下
2025-04-04