axios -vue 網路應用，Vue結合網路資料開發應用
阿新 • • 發佈：2020-12-21
網路應用，Vue結合網路資料開發應用
資料地址
http://https：//github.com/axios/axios
官網線上引用地址
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
<!DOCTYPE html> <!-- axios-vue --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1 . axios 官網提供的線上地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 2. vue --> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <!--3. v --> <div id="app"> <input type="button" value="獲取笑話" @click="getJoke"> <p>{{ joke }}</p> </div> <!-- 4.vm --> <script> /* 介面：隨機獲取一個笑話 請求地址：https://autumnfish.cn/api/joke 請求方法：get 請求引數：無 響應內容：隨機笑話 */ var app = new Vue({ el:'#app', data:{ joke:"很好笑的笑話！" }, methods:{ getJoke:function(){ // 儲存當前this var that = this; axios.get("https://autumnfish.cn/api/joke").then (function(response){ console.log(response.data); that.joke = response.data; },function(err){ }) }, } }); </script> </body> </html>獲取笑話
