構成
Chapter1 Vue.jsを使ってみよう
Chapter2 Vue.jsの基本をマスターしよう
Chapter3 コンポーネントを使おう
Chapter4 コンポーネントをさらに掘り下げる！
Chapter5 Nuxt.jsにアップグレード！
Chapter6 外部サービスを利用しよう！
Addendum JavaScriptオブジェクト超入門
感想
プロジェクトでNuxt.jsを扱うのでキャッチアップのために読みました。
Vue.jsの最も基礎的な書き方からスタートしてNuxt.jsへ入る流れで、非常に体系的に学べました。
JavaScriptも私はほとんど触ったことがないのですが、そういう話題もビギナー向けに書かれていたのがありがたかったです。
各種プロパティやディレクティブについても、「これで〜〜ができるけど更に〜〜機能を作りたい時もあってそのためにこれ」のような感じで説明がなされていて、1つ1つ順序立てて理解が深まったように感じました。
メモ
仮想ノード
- v-htmやv-bindは「仮想ノード」のための属性
- v-〇〇〇のvは「virtual」のv
- Vue.jsでは実際のDOMの上に仮想DOMが用意され、その中に仮想ノード（VNode）というオブジェクトでHTMLのタグがそのまま仮想的に構築されている。
- Vue.jsでは直接DOMを操作するのではなく、仮想DOMにある仮想ノードを操作することで、実際に表示されているDOMを更新する。
- v-〇〇は仮想ノードに対して属性を設定するもの
Nuxt.js?
- Vue.jsにある「コンポーネントタグがあるのみコードの中身がない」「データ管理機能が足りない」「ルーティングの仕組みがない」などの弱点を解決する
- SSR、Vuexプラグインを使ったデータ管理、Vue Routerによるルート管理機能などが追加された
ミューテーション
- ストアの値を変更するための機能
- ストアの値を直接書き換えることもできるが推奨されない
- 様々なコンポーネントから共用されるため、各コンポーネントから直接書き換えると問題を引き起こす可能性がある
- ミューテーションは値を操作する処理をストア側に用意し、それをコンポーネント側から呼び出すというやり方で安全に処理をする
アクション
- ミューテーションを呼び出す仕組み。複数ミューテーションを続けて呼び出す場合などに使われる
vuex-persistedstate
- ストアの値をリロード後も保持し続けるためのプラグイン
- ストアの値はページのロード時に生成されるため、リロードすると全て初期化される
クラシックモードとモジュールモード
- クラシックモード
- store/ ディレクトリの中に複数のファイルを設置し、それぞれにストアの内容を記述。発展的な方式
- モジュールモード
- 1つのファイル（index.js）内に全てのストア関係を記述。基本的な方式
