【初心者必見】Vue.jsの基本を学ぶ

Vue2

vue.jsとは

Vue.jsとはJavaScriptのフレームワークでViewフレームワークになります。

Vueの構文

new VueでVueインスタンスを生成ができます。
el要素で、html側idを指定することでVueを読み込めます。

<html>
<head>
    <title>Vue.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ hoge }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                hoge: '初期値'
            },
        });
    </script>
</body>
</html>

このコードでは、Vue.jsを読み込み、内にVue.jsアプリケーションを設定しています。data オプションで hoge の初期値を設定しています。

スポンサードサーチ

変数

<div id='app'>
  <p>{{ hoge }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    hoge: 'ここにhogeの値が入ります。'
  }
})

scriptタグ内でdataオプションでhogeを定義しています。

Vueライフサイクル

Vueサイクルの紹介です。

  1. beforeCreate:
  2. created:
  3. beforeMount:
  4. mounted:
  5. beforeUpdate:
  6. updated:
  7. beforeDestroy:
  8. destroyed:

beforeCreate

コンポーネントインスタンスが作成された後、データオブジェクトとイベント/ウォッチャが初期化される前に実行されます。

created

データオブジェクトやメソッドが初期化され、インスタンスが生成された後に実行されます。
DOMへのアクセスはまだできません。

beforeMount

テンプレートがコンパイルされ、仮想DOMにマウントされる前に実行されます。

mounted

コンポーネントがDOMに正式にマウントされた後に実行されます。
ここからDOM要素にアクセスできます。

beforeUpdate

データが変更され、仮想DOMが再描画される前に実行されます。

updated

データの変更がDOMに適用された後に実行されます。
この時点でDOMは更新されています。

beforeDestroy

コンポーネントが破棄される前に実行されます。
この時点ではコンポーネントはまだ正常に動作します。

destroyed

コンポーネントが完全に破棄された後に実行されます。
リソースのクリーンアップやイベントハンドラの削除など、コンポーネントの後片付けに使用できます。

スポンサードサーチ

export default

<template>
 <div>
  <p>{{ hoge }}</p>
 </div>
</template>

<script>
  export default {
   data(): {
     hoge: ''
   }
  }
</script>

モジュール内からエクスポートするデフォルトの値やオブジェクトを指定できます。

action：アクション

APIなどの非同期処理

actionsは非同期処理を実行し、その結果に応じてmutationsを呼び出すための関数です。
非同期データの取得、API呼び出し、タイマーイベントなどを処理するために使用されます。

const actions = {
  async fetchUserData({ commit }) {
    const user = await fetchUserFromAPI(); // APIからユーザーデータを取得
    commit('setUser', user); // ユーザーデータをセットするミューテーションを呼び出す
  },
  async addToCart({ commit }, product) {
    await saveProductToCartAPI(product); // ショッピングカートに商品を追加するAPI呼び出し
    commit('addToCart', product); // ショッピングカートに商品を追加するミューテーションを呼び出す
  }
}

スポンサードサーチ

state：ステート

値などの状態管理

stateはアプリケーション全体で共有するデータの状態を保持する場所です。
stateはコンポーネント間でのデータの受け渡しや同期に使用されます。

const state = {
  user: null, // ユーザー情報
  cart: [],   // ショッピングカートの中の商品
}

getters：ゲッターズ

stateのデータを計算する

gettersはstateのデータに対する計算済みの値やフィルタリングされたデータを提供します。
gettersはコンポーネント内で複雑な計算やフィルタリングを行うのに便利です

const getters = {
  cartTotal(state) {
    return state.cart.reduce((total, product) => total + product.price, 0); // ショッピングカートの合計金額を計算
  },
  hasUser(state) {
    return state.user !== null; // ユーザーがログインしているかどうかを確認
  }
}

mutation：ミューテーション

stateのデータを変更を行う

mutations は state のデータを変更するための関数です。
これらの関数は同期的で、状態の変更を実行します。
通常、コンポーネント内で直接 state を変更するのではなく、mutations を介して状態を変更します。
これにより、データ変更のトラッキングやデバッグが容易になります。

const mutations = {
  setUser(state, user) {
    state.user = user; // ユーザー情報を設定
  },
  addToCart(state, product) {
    state.cart.push(product); // ショッピングカートに商品を追加
  }
}

comuted：コンピュート

comuted

computed プロパティは、Vue.jsコンポーネント内で計算されるプロパティです。これは依存関係があるデータから派生する値を保持します。
computed プロパティは get 関数を持ち、その結果がキャッシュされ、依存関係が変更されたときにのみ再計算されます

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`; // firstName と lastName からフルネームを計算
  },
  cartTotal() {
    return this.cart.reduce((total, product) => total + product.price, 0); // ショッピングカートの合計金額を計算
  }
}

method：メソッド

Vue.jsコンポーネント内のメソッド

methods オプションは、Vue.jsコンポーネント内で使用できるメソッド（関数）を定義するための場所です。
メソッドを使用して、コンポーネント内でイベントハンドリング、非同期操作、カスタム関数などを実行できます。

methods: {
  addToCart(product) {
    this.cart.push(product); // ショッピングカートに商品を追加
  },
  async fetchData() {
    const data = await fetchSomeData(); // 非同期データの取得
    this.processData(data); // データ処理を実行
  },
  handleClick(event) {
    // イベントハンドリング
    console.log('Clicked:', event);
  }
}

クリックイベントなどもここで定義することができます。

<template>
  <div>
    <p>{{ hoge }}</p>
    <button @click="changeHoge">値を変更</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hoge: '初期値'
    };
  },
  methods: {
    changeHoge() {
      this.hoge = '新しい値';
    }
  }
};
</script>

Vue2

Posted by kami