Vue 3から始める、Vue.js 第8回 タスク編集機能によるVue活用方法の復習 これまで解説してきたVueの知識を活用し、タスク編集機能を実装します。復習を兼ねて実装方法を考えてみましょう。 カテゴリー JavaScript Vue.js 2021年05月06日 発行 著者 森 大典 フロントエンド・エンジニア Vue 3から始める、Vue.js シリーズの記事一覧 このシリーズの記事 第1回 Vue 3はどう変わったか 第2回 Vueの導入手順とアプリケーション構築の基礎 第3回 リアクティブなデータ表示 第4回 v-modelによる効率的なフォームの実装 第5回 算出プロパティによるパフォーマンスに配慮したデータの取得 第6回 条件付きレンダリングと修飾子によるイベントハンドリング 第7回 DOM要素の生成タイミングとref属性による参照 第8回 タスク編集機能によるVue活用方法の復習 第9回 Web APIの連携とライフサイクルフック 第10回 件数制限のあるWeb APIとの連携とwatchオプション 第11回 標準技術でシンプルに実現するコンポーネント指向開発 第12回 props/emitsで実現する単方向データフローによるコンポーネント実装 第13回 保守性に配慮したコンポーネント開発の実践 第14回 provide/injectによるコンポーネント間のデータ連携 第15回 スロットによるコンテンツの挿入とProviderコンポーネント 第16回 Composition APIの基本と新たな実装構成 第17回 refとreactiveの異なるデータ構造とその使い分け 前編 第18回 refとreactiveの異なるデータ構造とその使い分け 後編 第19回 コンポジション関数を用いたアプリケーション開発の実践 最終回 こんなときどうする? ピンポイントで効く便利な機能 目次 はじめに タスク編集機能の仕様 コンポーネントの実装 v-ifによる編集用UIの出力 templateによる要素の集約 タスク編集用のUI 編集用UIの自動フォーカス refの動的設定による要素参照 コードの確認 まとめ この記事を読むには購読の手続きが必要です 購読の手続きへ 月額880円(税込) + 初めてお申し込みの方には、30日間無料でお使いいただけます 第7回 DOM要素の生成タイミングとref属性による参照 第9回 Web APIの連携とライフサイクルフック