Vue.js の公式チュートリアルを行った際のメモ書き

対象読者

Vue.js 3 の公式チュートリアルの内容をざっと知りたい人

はじめに

Vue チュートリアル をやった際のメモ書きを記載します｡

1. 宣言的レンダリング

• SFC (単一ファイルコンポーネント) は HTML､ CSS､ JavaScript をカプセル化して .vue ファイル内に記述する
• 宣言的レンダリング: HTML を拡張したテンプレート構文を用いて HTML がどのように見えるかを記述できる
• mastaches 構文 (二重中括弧)で HTML から変数の値を呼び出せる
  • ex) <h1>{{ hoge }}</h1>

2. 属性バインディング

• ディレクティブは v- から始まる特別な HTML 属性
  • Vue のテンプレート構文の一部
• v-bind:{属性名}="変数名" で指定した属性名を変数の値にできる

3. イベントリスナー

• v-on ディレクティブで DOM イベント発火時の処理を指定できる

4. フォームバインディング

• v-bind と v-on を一緒につかうことで､双方向バインディングを作成することができる
• v-model ディレクティブを用いるだけで簡単に双方向バインディングを実現できる
• v-model ディレクティブはテキスト入力だけではなく､チェックボックス､ラジオボタン､セレクトボックスなどの他の入力タイプでも機能する

5. 条件付きレンダリング

• v-if ディレクティブで条件付きレンダリングを行える
• v-else ディレクティブや v-else-if ディレクティブもある

6. リストレンダリング

• v-for ディレクティブを使用すると､配列を基にした要素のリストをレンダリングできる
• :key で各オブジェクトを一意に特定出来るようにしている

7. 算出プロパティ

• computed() を用いることで他のリアクティブなデータソースに基づいて .value を計算する算出 ref を作ることが出来る
  • つまり､他のリアクティブが変更されたら､その変更を反映した値をレンダリングに反映できる

8. ライフサイクルとテンプレート参照

• ref 属性を使ってテンプレート参照ができる
• onMounted や onUnmounted などのライフサイクルがある

9. ウォッチャー

• watch() を用いることであるオブジェクトが変更したときの処理を記述することができる

10. コンポーネント

• import したコンポーネントはテンプレート内で <{コンポーネント名} /> と記述することで使用できる

11. props

• 子コンポーネントで defineProps() で定義した props を親コンポーネントから子コンポーネントに渡すことができる
  • <{子コンポーネント名} {props 名}="props の値">

12 イベントの発行

• emit を用いて子コンポーネントから親コンポーネントへイベントを発行できる
• 親コンポーネントは v-on ディレクティブを用いて発行されたイベントを検知することができる

13 スロット

• 親コンポーネントは slot を用いてテンプレートを子コンポーネントに渡すことができる
• 子コンポーネントの slot 内のコンテンツに親からテンプレートが渡されなかった時に表示するテンプレートを記述することができる

おわりに

Vue.js の全体観をざっと把握するには公式チュートリアルは良い教材でした｡