はじめに
vue.jsをやったことがない人、仕事でやることになった人が初めに覚えておくと良いポイントについて自分の経験をもとに記載します。
ライフサイクル
Vue.js には ライフサイクル という概念があり、作られたページはこのライフサイクルをもとに処理が実行されていく。
-
setup():
コンポーネントの作成を開始し、beforeCreate と created の前に実行され、data と method を作成します。
(vue2まで記載していたdata, methods, computedはsetup内ですべて表現可能) -
onBeforeMount():
コンポーネントがノードにマウントされる前に実行される関数です。 -
onMounted():
コンポーネントがマウントされた後に実行される関数です。 -
onBeforeUpdate():
コンポーネントが更新される前に実行される関数です。 -
onUpdated():
コンポーネントが更新された後に実行される関数です。 -
onBeforeUnmount():
コンポーネントがアンマウントされる前に実行される関数です。 -
onUnmounted():
コンポーネントがアンマウントされた後に実行される関数です。 -
onActivated():
に含まれるコンポーネントには、2つのライフサイクルフックが追加され、アクティブ化されたときに実行されます。 -
onDeactivated():
A コンポーネントから B コンポーネントに切り替えた場合、A コンポーネントが消えるときに実行されます。 -
onErrorCaptured():
子孫コンポーネントからの例外をキャッチしたときにアクティブ化されるフック関数です
ディレクティブ
Vue.jsをさわる上で基本となるのがマスタッシュ記法(v-text),v-if, v-show, v-for,v-bind, v-on, v-modelといったディレクティブとなりHTMLに対して独自の属性を追加することでDOM操作を行うことをいいます。
- マスタッシュ記法(v-text)
要素の textContent プロパティをセットする動作、基本的にはマスタッシュ記法{{hoge}}で書かれていることが多いがv-textで書かれているプロジェクトもたまにあるのでv-textは何となく覚えておくとよい。
<span v-text="msg"></span>
<!-- ↓マスタッシュ記法 -->
<span>{{msg}}</span>
- v-ifとv-show
v-showは式の値の真偽に基づいて、要素の可視性を切り替えます。v-ifは式の値の真偽に基づいて、要素またはテンプレートフラグメントを条件付きでレンダリングします。どちらも表示と非表示を切り替えるものだがv-ifはDOM要素の追加と削除、v-showはdisplayプロパティの値の変更によって実現しています。
<span v-if="true"></span>
<span v-show="false"></span>
- v-for
元となるデータに基づいて、要素またはテンプレートブロックを複数回レンダリングします。
<div v-for="item in items">
{{ item.text }}
</div>
配列のindexが必要な場合
<div v-for="(item, index) in items">
{{ item.text }}
</div>
- v-bind
v-bindはHTML要素の属性に、特定のデータを渡す際に利用できます。
<img v-bind:src="imageSrc" />
<!-- ↓":"で省略記法 -->
<img :src="imageSrc" />
- v-on
要素にイベントリスナーを追加します。
<button v-on:click="doThis"></button>
<!-- ↓"@"で省略記法 -->
<button @click="doThis"></button>
- v-model
フォーム入力要素またはコンポーネントに双方向バインディングを作成します。
DOMで変更があった時、その値をVueインスタンスのデータとして更新します。
Vueインスタンスのデータに変更があった時、DOMを更新します。
<input v-model="hoge">
最後に
今回はvue.jsの初心者向けに覚えておくと良いポイントについて記載しました。初歩的なことですが仕事でソースコードを見ることになった時などに覚えておけばある程度理解ができるのではないかと思います。
応用すればできることが色々あるので興味があったら調べてみてください。