小白也能學會的Vue和Axios教程，帶你玩前端開發

小白也能學會的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中文網其他相關文章！