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

Question

我有以下用 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 请求？

谢谢。

Answer 1

好吧，首先，您必须摆脱使用 jQuery 的 DOM Targeting。在 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 Resource 和 Axios。