相信看到JQuery你大概也會笑了，沒錯上一篇講了Axios，這一篇是要來用JQuery的ajax方法才實作，篇幅應該會小一點，畢竟這老大哥的地位已經很久了。
其實你問說為什麼我還要寫JQ+Vue的組合，因為，JQ還是許多公司及新手的首選，在網路上資料量也很多，隨便查都可以查的到東西，我們今天就來將昨天的範例改寫一下吧！

當然在使用JQ的時候我們必須要將JQ的lib加到我們的網站中

將jquery加入到你的網頁中

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>

接著我們來改摟，

<div id="app">
  <span v-for="teacher in teachers" style="display: block;">{{ teacher.TeacherName }}({{teacher.TeacherId}}):{{teacher.TeacherTel}}</span>
  <button @click="getTeacherData">Get All Teacher</button>
</div>

app.js

"use strict";

const Student = new Vue({
  el : '#app',
  data :　{
    teachers: []
  },
  methods : {
    getTeacherData:　function() {
      let self = this;
      $.get("http://localhost:8080/ironSchool/teacher/", (response) =>{
        for (let i in response) {
          self.teachers.push(response[i]);
        }
      });
    },
  }
});

這是我們一般在用的jqery，使用GET的func搭配vue的用法，使用vue其實真的很方便，把response的資料直接的顯示在前端當中，不用在特別的使用Selector，用法也跟我們一般在使用的方式一樣，沒有差別。

重點來了！使用非GET/POST的func時，Jquery會先使用Options這個http method，向伺服器詢問有哪些的http method可以使用，所以如果你要使用delete這個func的時候，在beego必須先設定好才能夠，使用喔！
下面示範使用DELETE來刪除資料。
我們稍為改一下原本的code

在<span>的地方加入@click="delTeacher(teacher.TeacherId)"，變成下面這樣

<span v-for="teacher in teachers" style="display: block;" @click="delTeacher(teacher.TeacherId)">{{ teacher.TeacherName }}({{teacher.TeacherId}}):{{teacher.TeacherTel}}</span>

javascript我們也稍為改一下，在methods裡面新增一個delTeacher()的方法，整個Instance會變成下面這樣

const Student = new Vue({
  el : '#app',
  data :　{
    teachers: []
  },
  methods : {
    getTeacherData:　function() {
      let self = this;
      self.teachers = [];   //清空原本的資料
      $.get("http://localhost:8080/ironSchool/teacher/", (response) =>{
        for (let i in response) {
          self.teachers.push(response[i]);
        }
      });
    },
    delTeacher: function(tid){
      let self = this;
      $.ajax({
        url: `http://localhost:8080/ironSchool/teacher/${ tid }`,
        method: 'DELETE',
      }).done(()=>{
        self.getTeacherData();
      });
    }
  }
});

我們來測試一下，當我們點擊那一列的時候會執行刪除。
順便來看一下，network的變化吧！

其實不管是使用JQuery還是Axios等等的這些套件，其實內容大同小異，選擇一種你喜歡的就行摟。