イイダリョウのブログ。【Vue.js】localStorageと連携したTodoリストを読み解く(HTML、CSS編)2019-07-29【Vue.js】localStorageと連携したTodoリストを読み解く(HTML、CSS編)JSVue.jsで単純なものを作るとリロードしたときに初期状態に戻ってしまって儚い(はかない)。いってデータベースと連携したものをつくるのはまだハードルが高い。前段階として以前にも触れたLocalstrageと連携して値を保存してみたい。公式サイトのサンプルにlocalStorageと連携したTodoリストがあったのでコードを読み解いてみました。クモのようにコツコツとTodoリスト完成品まずは完成品から。公式サイトのこちらのサンプルにある「TodoMVC」を元にしている。CodePen.テキストを日本語にしてみた。み」の絞り込み表示ができる右下の「すべて削除」で初期状態にもどる何か予定を入れた状態でリロードしていただくと、その状態がそのまま保持された!localStorageに保存されているためだ。"completed":false}]キー名はtodos-vuejs-2.0で値は配列の中にJSON形式で入っている。データはブラウザの中に保存されているため別のブラウザや端末には値を連携できないが、リロードによる「儚さ(はかなさ)」はだいぶ薄れたwHTMLコード全体像まずは大枠のタグ構成から見ていく。</footer></section>Todoリスト全体はtodoapp.headerはやることの入力欄.mainはやることリスト本体でv-showとv-cloakがある。footerはタブメニューでここにもでv-showとv-cloakがある。footerは非表示。v-showでその設定をしてそう。v-showはv-ifと同様、Vue.jsの独自属性で分岐処理。クモのようにコツコツとv-cloakはCSSに関連する属性で後述する。</header>inputタグにv-model属性と@keyup.enterがある。autofocusやautocompleteは馴染みが薄かったが、フォーム読み込み時のフォーカス設定をするinputタグデフォルトの属性だった。autocomplete>-HTML5タグリファレンスv-modelはVue.jsの独自属性でデータバインディング(フォームの入力値をリアルタイムに反映する)。クモのようにコツコツと@はVue.jsの省略記法でv-onのこと。Vue.jsv-onはイベント設定の属性。クモのようにコツコツとkeyup.enterということでエンターキーを押した時のイベントと紐づいている。この入力欄に打った内容がリアルタイムに下のやることリストに表示されたり、キーを叩いた時に発火するイベントが書かれている。次、やることリスト本体に当たる.main。</section>#toggle-allにv-modelがある。lavelタグは#toggle-allと紐づいている.todo-listはulタグでやることリスト本体.todoがはliタグでリストの1件単位。:keyで入力内容を追跡。:classでclass名を指定。v-modelは前述の通りデータバインディング。このinputタグは「全て選択」のチェックボックスなのでチェックの切替に対する反映。v-forはVue.jsの独自属性でループ設定。これでリストが件数分表示される。クモのようにコツコツと:はVue.jsの省略記法でv-bindのこと。Vue.jsv-bindはVue.jsの独自属性でタグの属性を指定できる。クモのようにコツコツと:keyは入力内容の追跡だがv-forの実行のために必要とのこと。※参考:v-forで配列を表示する[v-bind:key][index][Vue.js]:classはclassの指定だが値にcompleted、editingとあるので完了済や編集中で見た目を変える設定と紐づいていそう。次、リスト(li)の中身。destroyがある。classにv-modelがある。labelタグには@dblclickがある。destroyには@clickがある。inputタグの.editにはv-model、v-todo-focus、@blur、@keyup.enter、@keyup.escがある。ここはリスト自体にあたるのでVue.jsの属性が連続コンボ!v-modelと@(v-onの省略記号)は前述の通り。v-todo-focusはtodo名前的にもVue.jsのデフォルトの属性ではなさそう。調べたところVue.jsではカスタムでディレクティブを設定できるようだ。Vue.jsinputタグの.toggleは完了にするチェックボックスなのでv-modelでリアルタイムにそれが反映する。}}でリストのテキストが表示されるが中にダブルクリックのイベントが紐づいている。destroyにはクリックイベントが仕掛けられていて、クリックすると削除になる。inputタグの.editだがここは文字入力がないので謎の存在だった。上のlabelをダブルクリックすると文字が変更できるようになる!それがこinputタグだ。@blurはフォーカスが外れた時のイベント。Qiita他にエンターキーやESCキーのイベントも書かれている。