下面的代碼展示了如何使用Vue以及Axios實現一個簡單的HTTP請求。首先需要在HTML文件里導入Vue和Axios的CDN鏈接:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
接下來,我們可以在Vue實例中使用Axios來發送HTTP請求。在下面的代碼中,我們使用了一個按鈕來觸發請求,通過Axios發送了對某個API的GET請求,并將API返回的數據渲染到HTML頁面上:
<div id="app"> <button v-on:click="fetchData">Fetch Data</button> <ul> <li v-for="item in data">{{ item.title }}</li> </ul> </div> <script> new Vue({ el: '#app', data: { data: [] }, methods: { fetchData: function () { var self = this; axios.get('https://jsonplaceholder.typicode.com/posts') .then(function (response) { self.data = response.data; }) .catch(function (error) { console.log(error); }); } } }); </script>
在上面的代碼中,我們定義了一個Vue實例,并在data選項中定義了一個空數組用來存放API返回的數據。我們使用了一個methods對象來定義一個fetchData函數,當用戶點擊Fetch Data按鈕時會觸發該函數。fetchData函數通過Axios發送了一個GET請求,使用.then和.catch方法處理了API返回的數據和錯誤。在.then方法里,我們將API返回的數據賦給了Vue實例中的data選項,這樣就可以通過v-for指令將數據渲染到HTML頁面上。
上一篇c json 多 r n
下一篇html怎么復制一行代碼