Javascript 如何将JQuery AJAX函数转换为vue.js

我用jQuery编写了以下AJAX函数（只需进行AJAX调用即可获得div A和div B的结果-示例已简化）

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>

开始

我知道如何为vue.js创建HTML模板，以及如何设置JavaScript变量，但如何为vue.js设置AJAX请求

---

谢谢。

建议使用axios库

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

---

首先，您必须使用jQuery摆脱DOM目标。在VueJS中，没有直接的DOM操作。 接下来，您必须停止思考jQuery方式——Vue和jQuery是两种完全不同的东西，它们具有不同的设计模式

关于你的问题：

首先，必须在DOM元素上附加事件侦听器

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

---

但最后，我不建议您在这里使用jQuery-有更好的库，如Vue Resource和Axios。

您好，非常感谢您的回答，Axios库是Vue.js的一部分还是必须单独加载？现在测试，我发现以下错误：SyntaxError:导入声明可能只出现在模块的顶层使导入声明出现在文件的顶部与在retrieveData方法中使用jQuery有何区别？它取决于您使用的环境，导入方式与导入jQuery+1的方式相同Vue以数据为中心的逻辑与JQuery的DOM操作方法之间

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

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