Vue 3から始める、Vue.js
- カテゴリー
- JavaScript
- Vue.js
2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。初心者から上級者までVue.jsがわかるシリーズです。
第15回 スロットによるコンテンツの挿入とProviderコンポーネント
親コンポーネントが管理するコンテンツを、子コンポーネントの特定の場所へ差し込めるスロットについて解説します。これまでのデータの受け渡しだけでは処理しきれないケースを例に、活用場面を考えてみましょう。
第14回 provide/injectによるコンポーネント間のデータ連携
provideとinjectを利用したデータ連携について解説します。適切にデータの制御を行わないと、不要な依存関係を生み出してしまうので、注意が必要です。
第13回 保守性に配慮したコンポーネント開発の実践
例示のためのシンプルなコードでは気づきにくい、実装のポイントを解説します。親子のコンポーネント間のデータフローを壊れにくく保ちながら、保守性の高いコードを目指します。
第12回 props/emitsで実現する単方向データフローによるコンポーネント実装
親コンポーネントと子コンポーネント間のデータフローの要となるpropsとemitsの連携を解説します。
第11回 標準技術でシンプルに実現するコンポーネント指向開発
コンポーネントの分割方法について解説します。コンポーネント分割は使い所を誤るとかえって実装が煩雑にもなりえます。留意すべきポイントも挙げました。
第10回 件数制限のあるWeb APIとの連携とwatchオプション
大量のデータのやり取りが必要になると、すべてのデータをクライアント側に保持するというのは、現実的な実装ではありません。そのようなときの実装方法を解説します。
第9回 Web APIの連携とライフサイクルフック
これまでは初期データをアプリ内で保存してきたのですが、実際のWebアプリでは、Web APIを使ってデータを取得、更新することが一般的です。タイミングよく通信を処理するためのライフサイクルフックについて解説します。
第8回 タスク編集機能によるVue活用方法の復習
これまで解説してきたVueの知識を活用し、タスク編集機能を実装します。復習を兼ねて実装方法を考えてみましょう。
第7回 DOM要素の生成タイミングとref属性による参照
Vueが用意していないDOMネイティブの機能を使う場合、DOMの参照が必要です。その際、DOMの描画が終わった時点での参照が必須となります。そのような場面での実装の定石を学びます。
第6回 条件付きレンダリングと修飾子によるイベントハンドリング
v-show、v-ifディレクティブによる条件付き描画や、修飾子を用いたイベントハンドリングの効率的な実装を解説します。
第5回 算出プロパティによるパフォーマンスに配慮したデータの取得
リアクティブなデータの取り回しができるVue.jsは不要な処理が行われないよう配慮が必要です。Vue.jsを使うなら初めから意識しておかねばならないポイントを押さえます。
第4回 v-modelによる効率的なフォームの実装
v-modelディレクティブを使って、双方向のデータバインドを実装します。また、readonly APIで、特定の値を読み出し専用にし、データ書き換えが行われれないようにする処理についても解説します。
第3回 リアクティブなデータ表示
UIの操作に応答してデータ表示が変わるコンポーネントへと実装を進めます。使用するプロパティや、イベントハンドラの定義を解説します。
第2回 Vueの導入手順とアプリケーション構築の基礎
Vue.jsでできることの特徴を把握するために簡単なコンポーネントを実装してみます。データ定義、データバインディング、ディレクティブなど基本的な概念がわかります。
第1回 Vue 3はどう変わったか
2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。第1回目はVue 3の概要を紹介します。