はじめに
- コースの紹介
- Vue.jsでHello World !を表示させてみる
- ボタンを押したら文字が反転する処理をVue.jsで行ってみる
- このコースの流れ
- 再生速度の変更とQ&Aの使い方について
- ローカル環境でVue.jsを動かす方法
これがVue.jsの基礎、テンプレート構文だ
- イントロダクション-セクション2
- テンプレート構文とは何か
- 二重中括弧を使ってデータを描画する
- thisを理解して、methodから自分のdataにアクセスする
- v-から始まる特別な属性であるディレクティブを理解する
- 一度だけ描画するv-onceディレクティブを理解する
- v-htmlを使って、データをHTMLとして出力する(XSS脆弱性に注意)
- v-bindを使用して、属性の値をデータに対応づける
- v-bindの応用的な使い方を学ぶ
- v-onを用いて、クリックなどのイベント発生時に特定の処理をする
- v-onの引数となるDOMイベント一覧
- v-on使用時に、イベントオブジェクトを使ってイベントの情報を取得する
- v-onに指定しているメソッドに引数を持たせる
- .stopと.preventという２つの例を見ながら、頻繁に行われる処理を簡略化した、イベント修飾子を理解する
- キー修飾子を使って、特定のキーボードを押した時にイベントを発火するようにする
- v-onディレクティブの引数を[ ]を使って動的に表現する
- @マークを使ってv-onを省略記法で書く
- v-modelを使用して、双方向バインディングを作成する
- computedプロパティを使って、動的なデータを表現する
- computedとmethodの違いを理解し、算出プロパティのリアクティブな依存関係にもとづきキャッシュされるという性質を理解する
- ウォッチャを使って、データが変わった時に特定の処理をする
- 丸カッコ( )は、二重中括弧とv-onディレクティブにおいて、いつ必要なのか
- クラスをデータにバインディング(紐付け)する方法その１。オブジェクトを渡し、真偽値を使って動的に適応させるクラスを切り替える
- クラスをデータにバインディングする方法その2。配列を使って、適応させたいクラスを並べる
- スタイル属性を、オブジェクトを用いて動的にバインディングする
- スタイルオブジェクトをデータに書いて、コードを見やすくする
- 複数のスタイルオブジェクトを配列構文を用いて適応させる
- まとめ
「条件付きレンダリング」と「リストレンダリング」
- イントロダクション-セクション3
- v-ifディレクティブを使って、条件に応じて描画する処理を書く
- v-elseを使って、v-ifがfalseの場合の処理を書く
- v-else-ifを使って、複雑な条件式を作る
- templateタグを使用して、不必要な要素を加えずにv-ifを複数の要素に適応させる
- v-showを使って、頻繁に何かを切り替える処理のパフォーマンスを高める
- v-forディレクティブを使用して、配列に基づいてリストを描画する
- ２つ目の引数に配列のインデックスを取ってv-forを使用する
- オブジェクトに対してv-forディレクティブを使用する
- オブジェクトのv-forには、第２引数と第３引数にキーとインデックスを取る
- templateタグを使用して、不必要な要素を加えずにv-forを複数の要素に適応させる
- n in 10 のように、整数値に対してv-forを適用する
- inの代わりにofを使用してJavaScriptのイテレータ構文に近い書き方をする
- key属性をつける必要性を学び、予期せぬバグを起こさないv-forを作る
- まとめ
Vueインスタンスとその内部構造はこうなっている
- イントロダクション-セクション4
- Vue インスタンスは複数作ることができる
- 外側からVue インスタンスにアクセスする方法
- リアクティブシステム(getter、setter、Watcher)がどのように動いているかを確認し、プロパティを後から追加できないことを理解する
- Vueインスタンスプロパティの$dataの紹介
- 内側からVueインスタンスのプロパティやメソッドにアクセスする
- VueのAPI一覧はここに載っています。
- $mountメソッドを使用して、elプロパティの代わりにする
- templateプロパティを使って、文字列のみでテンプレートを書く
- render(描画)関数を使用して、仮想ノードを作ってDOMの描画を行う
- 仮想DOMと、その必要性を理解する
- 仮想DOMを図で理解する
- Vue インスタンスライフサイクルの全体像を見て、Vueがどのように動いているかを理解する
- ライフサイクルフックのタイミングを実際にコードで確かめる
- コンポーネントを使用して、同じようなインスタンスを使い回す
- まとめ
Vue CLIを使った実践的な開発をはじめる方法
- イントロダクション-セクション5
- なぜVue CLIを使う必要があるのか
- Vue CLIのインストールと初期設定を行う
- インストール時の補足
- Vue CLIが作成したそれぞれのファイルの説明
- .vueファイル(単一ファイルコンポーネント)とmain.jsの解説
- デプロイ時の本番環境のためのbuildをしてみる
- まとめ
ゼロから始めるコンポーネント
- イントロダクション-セクション6
- コンポーネントを使用して、再利用可能なVueインスタンスを作る
- dataはなぜコンポーネントにおいて関数である必要があるのか
- コンポーネントにおける、ローカル登録とグローバル登録の違いを理解する
- 「 import App from ‘./App.vue'」の意味を理解する
- 単一ファイルコンポーネント(.vueファイル)の基礎的な使い方
- 実際に単一ファイルコンポーネントを作成してグローバル登録する
- templateはルート要素を1つにしなければならないことに注意する
- シングルファイルコンポーネントをローカル登録する
- componentsフォルダを作成して、綺麗なフォルダ構造を作る
- コンポーネントの名前はケバブケースかパスカルケースにする
- スコープ付きCSSと、Vue.jsがそれをどのように実装しているのかを理解する
- まとめ
コンポーネント間でデータを受け渡す方法
- イントロダクション-セクション7
- 親子間のデータの受け渡しの必要性を理解する
- propsを使用して、親から子にデータを渡す
- propsの名前はJavaScriptではキャメルケース、HTML内ではケバブケースにすることをお勧めします
- コンポーネント内でpropsを扱う時はdataのように使用する
- バリデーションを使用して、プロパティに意図しない値が渡されるのを防ぐ
- 複数のpropsをつける方法
