イイダリョウのブログ。【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1)2019-07-31【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1)JSVue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はHTML、CSS編でした。localStorageと関わる部分を見たかったけどボリュームがあったのでまずは全体像から。クモのようにコツコツとTodoリスト完成品まずは完成品、こちらです。"completed":false}]localStorageについてはこちらを参照。クモのようにコツコツと前回、HTMLタグの中にv-xxx、:、@などVue.jsの独自属性がたくさんあった。JSにそれらと紐づいた処理が書かれているはず。JSJSコードを見ていく。JSコード全体コード全体はこちら。mountapp.$mount('.todoapp')JS全体像まずは一番外側の塊から見ていき、全体像をイメージしたい。処理部分を省略したのがこちら。冒頭のコメントコメントを和訳してみる。JavaScriptの120行までの有効な行でハッシュベースのルーティング。変数STORAGE_KEYと変数todoStorage次のコメントを和訳。localStorageの持続性ここら辺にlocalStorageの処理が書かれていそう。変数filters可視性フィルタ可視性フィルタとはなんだろう。VueインスタンスここでVueインスタンスが作られている。関数onHashChange()ルーティングを処理するルーティング。切り替え系の処理が書かれていそう。下にハッシュチェンジhashchangeのイベントリスナとonHashChange()関数実行が書かれている。ハッシュチェンジとはページ内リンクでURLの後ろに付く#hogeなどのこと。フラグメント識別子の変更時に発火するマウント最後にマウント。)vmオブジェクトに$mount()メソッドが続く。jQueryみたいな$付きのメソッドだがVue.js独自のメソッドのよう。インスタンスのマウンティングを手動で開始するために使用することができます。確かに後述するVueインスタンスの中にはelオプションはない。todoappタグの紐づけているわけか。次にVueインスタンスの全体像を見ていく。}})変数appでVueインスタンスを作成している。コメントを和訳してみる。dataオプションアプリ初期状態watchオプションlocalStorageの持続性のためにタスクの変更を監視するlocalStorageの監視関係の処理がここに書かれていそう。watchについてはこちらの記事も参照。クモのようにコツコツとcomputedオプション計算プロパティ計算系の処理がかかれていそう。コメントのリンク先はこちら。※参考:Redirecting...computedについてはこちらも参照。クモのようにコツコツとfiltersオプション先ほど変数filtersが出てきたので、関係していそう。filtersオプションはあまり触れる機会がなかった。公式サイトを見てみる。Vue.jsmethodsオプションデータロジックを実装するメソッド。DOMの操作はまったくありません。名前の通りメソッドの処理が書かれている。おなじみのオプション。directivesオプションdirectivesオプションって初めて見た。入力フィールドに注目する前にDOMおん更新に対する処理が書かれているようだ。directivesオプションは初めて見た。公式サイトを見てみる。Vue.js続きます...全体像だけでもボリュームがあったので、処理の詳細については次回に見ていきます。23:17Tweet関連記事2019-08-25【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めたVue.jsの続きでず。前回まではコンポーネントについて触れまし...2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。前回はコンポーネントにカウンター...2019-08-09【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-3)Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと...2019-08-04【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと...2019-07-09【Vue.js】watch(監視プロパティ)で戦国時代クイズを作ったVue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。