【Vue】Vueの基礎

Vue.jsの基礎となる3つのしくみについて書いていく

ディレクティブ
算出プロパティおよびメソッド
ライフサイクルフック

1. ディレクティブ

テンプレートに属性やスタイルの操作、条件分岐、繰り返し処理など、より複雑な機能を組み込みたい場合は、ディレクティブ（v-****）を利用する
コロンの後方はディレクティブの引数（ディレクティブによっては引数を受け取るものがある）

<!-- urlはjs側のdataオプションで用意 -->
<a v-bind:href="url">リンク</a>

v-bind
属性値にJavaScriptの値を埋め込む
v-bindはよく利用するため省略構文が用意されている

<a :href="url">リンク</a>

checkd、selected、disabledなど、値が要らない属性（属性名を指定するだけで意味がある属性/論理属性）に値をバインドするにはtrueまたはfalseを用いる

<!-- flagはjs側のdataオプションで用意 -->
<input type="button" value="クリック" v-bind:disabled="flag" />

2. 算出プロパティ

算出プロパティとは既存のプロパティを算出した結果を取得するためのゲッターで、computedオプション配下にハッシュ形式で書く
例えばemailプロパティの@より前だけ取り出して表示したい場合、以下のように書く

    <div id="app">
        <p>{{ localEmail }}</p>
    </div>

new Vue({
  el: "#app",
  data: {
    email: "xxxx@hoge.com",
  },
  computed: {
    localEmail: function () {
      return this.email.split("@")[0].toLowerCase();
    },
  },
});

メソッドによるロジックの切り出し

メソッドを使って書き換えると以下の書き方になる（ほぼ同じ意味）

    <div id="app">
        <p>{{ localEmail() }}</p>
    </div>

new Vue({
  el: "#app",
  data: {
    email: "xxxx@hoge.com",
  },
  methods: {
    localEmail: function () {
      return this.email.split("@")[0].toLowerCase();
    },
  },
});

算出プロパティとメソッドの違い

同じような使い方もできるが異なる点もある

算出プロパティは引数を持てない
算出プロパティの用途は基本的に既存データの加工を伴う取得であり、クリックイベントの処理などはメソッドの役割
算出プロパティの値はキャッシュされる（算出プロパティが自身が依存するプロパティ（this.***）が変更された場合にのみ評価されるのに対し、メソッドは再描画のたびに評価される）

3. ライフサイクルフック

Vueインスタンスは、最初に生成された後、要素にマウントされて、データの変化に応じてビューを更新させていき、最終的に破棄される
この一連の流れはライフサイクルと呼ばれる
Vue.jsにはライフサイクルの変化に応じて呼び出されるメソッドが用意されている（ライフサイクルフック）
このうちよく使われるのはcreated、mount、beforeDestroy

メソッド名	概要
beforeCreate	インスタンスが初期化されるときに呼ばれる
created	インスタンスが作成された後に呼ばれる
beforeMount	マウンティングが開始される直前に呼ばれる
mounted	インスタンスがマウントされた後に呼ばれる
beforeUpdate	データが更新された後、再描画前に呼ばれる
updated	データが更新された後、再描画後に呼ばれる
activated	生き続けたコンポーネントが活性化するとき呼ばれる
deactivated	生き続けたコンポーネントが非活性化するとき呼ばれる
beforeDestroy	Vueインスタンスが破棄される直前に呼ばれる
destroyed	Vueインスタンスが破棄された後に呼ばれる
errorCaptured	任意の子孫コンポーネントからエラーが捕捉されるときに呼ばれる

以下のように利用する

new Vue({
  el: "#app",
  beforeCreate: function () {
    console.log("beforeCreate...");
  },
  created: function () {
    console.log("created...");
  },
...