獲取後臺資料使用JQ-AJAX 和 Vue-Axios 兩種方式的使用對比
阿新 • • 發佈：2018-12-13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <button id="getData">JQ-AJAX獲取資料</button> <button @click="getAxios">Vue獲取資料</button> </div> <script> new Vue({ el:"#app", methods:{ //使用Vue中的axios獲取資料 getAxios:function(){ axios.get('http://jsonplaceholder.typicode.com/users', { params: { ID: 12345 } }) .then(function (response) { console.log("Vue獲取的資料"); console.log(response.data); }) .catch(function (error) { console.log(error); }) } } }) //使用 // $("#getData").click(function(){ //ES6之前寫法 $("#getData").click( () =>{ //ES6寫法 $.get("http://jsonplaceholder.typicode.com/users",function(src){ console.log("JQ-AJAX獲取的資料") console.log(src) }) }) </script> </body> </html>
在Vue cli 中使用axios
