小白也能學會的Vue和Axios教程，帶你玩前端開發
一、Vue 簡介
Vue 是一個前端開發框架，它能幫助我們建立互動式的使用者介面。與其他框架相比，Vue 更加輕量級、易學易用，適合各種規模的專案開發。
1.1 Vue 的安裝
首先，我們需要安裝 Vue。可以透過以下方式進行安裝：
1.1.1 使用套件管理工具安裝
在命令列中使用npm 或yarn 安裝Vue：
npm install vue
或
yarn add vue
1.1.2 使用CDN 引入
在HTML 檔案中新增以下程式碼：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1.2 Hello World
在HTML 檔案中新增一個容器：
<div id="app">
{{ message }}
</div>在JavaScript 檔案中加入以下程式碼：
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})開啟瀏覽器，你將會看到"Hello World!" 字樣。
二、 Axios 簡介
Axios 是一個基於 Promise 的 HTTP 用戶端，用於在瀏覽器和 Node.js 中發送 HTTP 請求。它可以在不同的平台上跨域請求數據，並且支援請求攔截、回應攔截等功能。
2.1 Axios 的安裝
使用以下命令安裝Axios：
npm install axios
或
yarn add axios
2.2 傳送GET 請求
在JavaScript 文件中加入以下程式碼：
axios.get('/api/users')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});以上程式碼發送了一個GET 請求，並列印出傳回的資料。
2.3 傳送 POST 請求
在 JavaScript 檔案中加入以下程式碼：
axios.post('/api/users', {
firstName: 'John',
lastName: 'Doe'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});以上程式碼傳送了一個 POST 請求，並傳遞了一個 JSON 物件作為請求體。
三、Vue 和 Axios 結合使用
現在，讓我們將 Vue 和 Axios 結合使用。
3.1 安裝 Vuex
Vuex 是專為 Vue.js 應用程式開發的狀態管理模式。使用下列指令安裝Vuex：
npm install vuex
或
yarn add vuex
3.2 建立store
在JavaScript 檔案中新增以下程式碼：
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
users: []
},
mutations: {
setUsers(state, users) {
state.users = users;
}
},
actions: {
getUsers({ commit }) {
axios.get('/api/users')
.then(function (response) {
commit('setUsers', response.data);
})
.catch(function (error) {
console.log(error);
});
}
}
});
export default store;以上程式碼建立了一個Vuex 的store，其中state 定義了一個名為users 的狀態，mutations 定義了一個名為setUsers 的方法用於更新users 的值，actions 定義了一個名為getUsers 的方法用於發送GET 請求，並更新users 的值。
3.3 使用store
在JavaScript 檔案中新增以下程式碼：
import Vue from 'vue';
import store from './store';
new Vue({
el: '#app',
store,
mounted() {
this.$store.dispatch('getUsers');
},
computed: {
users() {
return this.$store.state.users;
}
}
});以上程式碼將store 匯入，並在Vue 實例中使用store，並在mounted 鉤子中調用getUsers 方法，將取得的資料儲存到users 中，然後透過computed 計算屬性將users 綁定到元件的範本中。
現在，重新整理頁面，你將會看到從背景取得到的使用者資料。
結語
透過本教程，你已經學會了使用 Vue 和 Axios 建立一個簡單的前端應用。希望這篇文章對你有幫助，讓你更深入理解 Vue 和 Axios 的用法，以及它們在前端開發中的應用場景。祝你學習愉快，玩前端開發！
以上是小白也能學會的Vue和Axios教程，帶你玩前端開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
