Vue.js を使用して 1 年以上経過したので、経験も踏まえながら Vue.js の超基礎を解説します。

結論

  • Vue ファイルは HTML / JavaScript / CSS の 3 言語が 1 ファイルに同居
  • template / script / style の 3 ブロック構造を押さえれば書ける
  • script ブロックは data・methods・ライフサイクルの役割を理解するのが第一歩
  • ライフサイクルは主に created と mounted の使い分けを覚える

Vue ファイルの構造

Vue ファイルは 3 つの言語が全て入っています。

  • HTML
  • JavaScript
  • CSS

具体的には以下の通りです。

<template>
  <div>
    html記述
  </div>
</template>

<script>
  export default {
    name: "XXX",
    data() {
      return {
        xxx: yyy
      }
    }
  }
</script>

<style lang="css">

</style>

各言語ごとに分離可能ですが、今回は省略します。
script と style は他の言語に変更可能です。

筆者は主に script は TypeScript、style は SCSS か Stylus を採用しています。

template

HTML を記述する箇所です。

基本的に普通の HTML と同じ記法ですが、Vue 独自の記述があります。

Vue 独自の記述については別途記事で解説します。

script

JavaScript 系を記述する箇所です。

今回は JavaScript を例に解説します。

以下が基本の記述です。

export default {
  data() {
    return {
      xxx: "yyy"
    }
  },

  methods: {
    hogeMethod(str) {
      return str
    },
    hugaMethod() {
      let test = this.xxx;
      test = this.hogeMethod(test);
      return test;
    }
  }
}

data は Vue ファイル内で利用可能な変数を宣言・初期化することができます。
HTML に加工データを表示したい時などに頻繁に使用します。

※オブジェクト型で return しているので注意です。

methods は一般的な関数です。

同ファイル内の変数・関数を呼び出す際は this. を先頭に付けてください。
同関数内のローカル変数には this. は不要です。

以下の箇所が該当します。

hugaMethod() {
  let test = this.xxx;
  test = this.hogeMethod(test);
  return test;
}

ライフサイクル

ライフサイクルは今回の記事で最も理解しにくい箇所です。
公式では以下のページで確認できます。

Vue.js 公式: ライフサイクルダイアグラム

Vue ファイルが読み込まれてから破棄されるまでのタイミングを 8 つで区切り、JavaScript 内でタイミングごとに処理をコントロールできます。

タイミングは以下の通りです。

  1. beforeCreate - インスタンス前
  2. created - インスタンス後
  3. beforeMount - マウント前
  4. mounted - マウント後
  5. beforeUpdate - 更新前
  6. updated - 更新後
  7. beforeDestroy - 破棄前
  8. destroyed - 破棄後

対応する記述は以下の通りです。

export default {
  data() {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {}
}

主に使用するのが created と mounted です。
created と mounted の違いは、DOM 要素の読み込みタイミングです。

  • created は DOM 要素が読み込まれる前
  • mounted は DOM 要素が読み込まれた後

となっています。

基本は created で初期化などの script 処理を行い、mounted で HTML に関連する処理を行いましょう。

style

CSS 系を記述する箇所です。
普通の CSS と同じ記法なので、問題なく書けると思います。

.display-flex {
  display: flex;
}

まとめ

今回は Vue.js の超基礎を紹介しました。

メイン所である Component と Binding については別記事で解説します。

関連記事: