如何轉換JQuery的AJAX功能vue.js

我已經寫在jQuery的以下AJAX功能（只需AJAX調用以獲取股利A和DIV乙結局 - 的例子被簡化）如何轉換JQuery的AJAX功能vue.js

的JavaScript

$(document).ready(function(){ 
    $("#c").on("click", function() { 
     jQuery.ajax({ 
      type: "POST", 
      url: "post.php", 
      data: "", 
      dataType:"JSON", 
      success: function(data){ 
       if (data.status == 1){ 
        $("#a").html(data.a); 
        $("#b").html(data.b); 
       } 
      } 
     }) 
    }) 
})

HTML

<div id="a"></div> 
<div id="b"></div> 
<button id="c">Start</button>

我明白如何使HTML TEM如何設置vue.js以及如何設置JavaScript變量，但是如何設置vue.js的AJAX請求？

謝謝。

來源

2017-02-10 Phoca

建議的方法是使用axios庫。

<div id="app"> 
    <div>{{a}}</div> 
    <div>{{b}}</div> 
    <button @click="retrieveData">Start</button> 
</div>

凡Vue的實例

import axios from 'axios' 
new Vue({ 
    el: '#app', 
    data: { 
    a: '', 
    b: '' 
    }, 
    methods: { 
    retrieveData() { 
     axios.post('post.php', {},) 
     .then(resp => { 
     this.a = resp.data.a 
     this.b = resp.data.b 
     }) 
    } 
    } 
})

來源

2017-02-10 23:47:32 gurghet

嗨，非常感謝你的回答，是Axios圖書館是vue.js的一部分還是必須單獨加載？ – Phoca

現在測試，我收到以下錯誤： SyntaxError：導入聲明可能只出現在模塊的頂層 – Phoca

使導入聲明出現在文件頂部 – gurghet

好了，第一件事首先，你必須擺脫的DOM與jQuery.In VueJS定位，有沒有直接的DOM操作。接下來，你必須停止思考jQuery的方式--Vue和jQuery是兩種完全不同的東西，它們有不同的設計模式。

關於你的問題：

首先，你必須對DOM元素

<button id="c" @click="ajaxMethod">Start</div>

然後附上事件監聽到您的Vue的情況下，你要定義一個方法，但是你把它之前，要確保您有jQuery的安裝

new Vue({ 
    el: '#app', 
    data: { 
    msg: 'hi'; 
    }, 
    methods: { 
    ajaxMethod() { 
    jQuery.ajax({ 
     // bla bla bla... 
    }) 
    } 
    } 
})

但最後，我不會建議你使用jQuery在這裏 - 有更好的庫如Vue公司資源和Axios公司。

來源

2017-02-10 23:50:04

嗨，謝謝你的回答 – Phoca

+1對於指向數據中心Vue的邏輯和JQuery的DOM操作方法 – ira

如何轉換JQuery的AJAX功能vue.js

回答

相關問題