初心者でもフロントエンド開発を始めるのに役立つ Vue と Axios のチュートリアル

初心者でも学べる、フロントエンド開発を体験できる Vue と Axios のチュートリアル

1. 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!」という文字が表示されます。

2. 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 オブジェクトをリクエスト本文として渡します。

3. Vue と Axios の組み合わせ

次に、Vue と Axios を組み合わせてみましょう。

3.1 Vuex のインストール

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。次のコマンドを使用して Vuex をインストールします:

npm install vuex

または

yarn add vuex

3.2 ストアの作成

次のコードを 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 ストアを作成します。state は users という名前の状態を定義し、mutations はユーザーの値を更新するための setUsers という名前のメソッドを定義し、actions は GET リクエストを送信してユーザーの値を更新するための getUsers という名前のメソッドを定義します。

3.3 ストアを使用する

次のコードを 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;
    }
  }
});

上記のコードはストアをインポートし、Vue インスタンスでストアを使用し、それを呼び出します。マウントされたフック内 getUsers メソッドは、取得したデータをユーザーに保存し、計算されたプロパティを通じてユーザーをコンポーネントのテンプレートにバインドします。

ここでページを更新すると、バックグラウンドから取得されたユーザー データが表示されます。

結論

このチュートリアルを通じて、Vue と Axios を使用して単純なフロントエンド アプリケーションを構築する方法を学びました。この記事が役に立ち、Vue と Axios の使用法、およびフロントエンド開発におけるそれらのアプリケーション シナリオについての理解を深めることができれば幸いです。フロントエンド開発を楽しく学び、楽しんでいただければ幸いです。

以上が初心者でもフロントエンド開発を始めるのに役立つ Vue と Axios のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。