Vue.jsを習得するためにやった事 まとめ（随時更新）

JSフレームワーク「Vue.js」を習得するためにやったことをここにまとめます。2019年現在、最優先で取り組んでいるテーマです。随時更新中！！

**※2020/01/07追記**：[vuex-persistedstateでローカルストレージにデータを保存](#vuex)

# Vue.js基本

### 三大フレームワーク比較とHello world

そもそもJSフレームとは何か？どんなことができるのか？三大フレームワークと言われるReact、Angularなどと比較した結果、Vue.jsを最初にやってみることにした。

※参考：[三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！](https://www.i-ryo.com/entry/2018/06/22/013052)

### イベント（v-on）、分岐（v-show、v-if）、ループ（v-for）

イベント設定の「v-on」、条件分岐の「v-show」と「v-if」、ループの「v-for」でどんなことができるのか実際にやってみた。

※参考：[【Vue.js】イベント（v-on）、分岐（v-show、v-if）、ループ（v-for）をやってみた！](https://www.i-ryo.com/entry/2018/08/22/222405)

# データバインディング

### 属性変更（v-bind）

属性をリアルタイムに変更するv-bind。タグ内のテキスト変更以外の表現に広がる。

※参考：[【Vue.js】v-bindでclass名を動的に追加、削除する！（北斗の拳の名言編）](https://www.i-ryo.com/entry/2019/05/29/220001)

### 入力テキスト反映（v-model）

inputタグに入力した文字に対応してリアルタイムにDOMのテキストを変える。だんだんJSフレームワークっぽい体験になってきた！

※参考：[【Vue.js】v-modelデータバインディング事始め（リンダリンダの歌詞を変えてオリジナルラブソングを作る）](https://www.i-ryo.com/entry/2019/06/10/224212)

### 算出プロパティ（computed）

算出プロパティcomputedを使って、inputタグい入れた値を元にリアルタイム四則演算。割り勘アプリを作ってみる！また、数値だけでなく文字列の結合もできた（こち亀アプリ）

※参考：[【Vue.js】computed（算出プロパティ）で割り勘アプリを作る（おまけでこち亀アプリも）](https://www.i-ryo.com/entry/2019/06/22/122018)

### 監視プロパティ（watch）

監視プロパティ（watch）を使って、inputタグに入れた文字列を監視し、正解、不正解の分岐処理。戦国時代クイズを作ってみた！

※参考：[【Vue.js】watch（監視プロパティ）で戦国時代クイズを作った](https://www.i-ryo.com/entry/2019/07/09/001503)

# Vue.js応用

### アニメーション（transitionタグ）

transitionタグを使って、inputタグの入力値をフワッと表示するアニメーションを作る。

※参考：[【Vue.js】transitionタグでアニメーション効果をつける](https://www.i-ryo.com/entry/2019/07/11/231002)

### Google Chartsと連動

Google Chartsのグラフの項目に投票ボタンを追加し、投票結果をリアルタイムにグラフに反映する。

※参考：[【Vue.js】Google Chartsのグラフと連動させる](https://www.i-ryo.com/entry/2019/07/22/233650)

# JSON読み込み（axios）

axiosを使って外部のJSONを読み込んでみる。まずはデータ全体。

※参考：[【Vue.js】axiosでJSONファイルを読み込む（酒が飲めるぞ！編）](https://www.i-ryo.com/entry/2018/11/06/215103)

外部JSONファイルのデータのキーや値を個別に読み込んで、DOMに表示する。ループしてリストも作成。

※参考：[【Vue.js】axiosでJSONファイルを読み込む（はっぴいえんど編）](https://www.i-ryo.com/entry/2019/04/29/193911)

# localStorage

Vue.jsでリアルタイムに変更した内容はリロードすると消えてしまう。儚い。Vue.js公式サイトにlocalStorageに値を保存してリロードしても消えないTodoリストがあたのでコードを読み解く。

その１：HTML、CSS編

※参考：[【Vue.js】localStorageと連携したTodoリストを読み解く（HTML、CSS編）](https://www.i-ryo.com/entry/2019/07/29/075216)

その2：JS全体像編

※参考：[【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-1）](https://www.i-ryo.com/entry/2019/07/31/231717)

その3：JS詳細編（localStorage設定もあり）

※参考：[【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-2）](https://www.i-ryo.com/entry/2019/08/04/224128)

その4：Vueインスタンス編

※参考：[【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-3）](https://www.i-ryo.com/entry/2019/08/09/072953)

# コンポーネント

コンポーネントとは何ぞや？と調べたこと、実際に作ったコンポーネントのパーツを読み込むところまで。

※参考：[【Vue.js】コンポーネント事始め（グローバル登録とローカル登録）](https://www.i-ryo.com/entry/2019/08/14/061934)

コンポーネントでリストを作り、リアルタイムにカウンターの数値を反映する。

※参考：[【Vue.js】コンポーネントにカウンターを仕込む（※dataオプションを無名関数に！）](https://www.i-ryo.com/entry/2019/08/17/080831)

コンポーネントのリストにpropsオプションで一つ一つ固有の値を渡す。

※参考：[【Vue.js】コンポーネントにpropsオプションで値を渡す](https://www.i-ryo.com/entry/2019/08/22/062356)

# UIフレームワーク「Vuetify」

UIフレームワーク「Vuetify」をCDNリンクで事始める。

※参考：[【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた](https://www.i-ryo.com/entry/2019/08/25/171435)

Vuetifyに用意されているボタン（v-btn）を横に並べてみる。

※参考：[【Vue.js】Vuetifyでボタンを並べてみる（v-app、v-content、v-container、v-layout、v-flex、v-btn）](https://www.i-ryo.com/entry/2019/08/29/074303)

Vuetifyに用意されているヘッダー（v-app-bar）、フッター（v-footer）を配置してみる。

※参考：[【Vue.js】Vuetifyにヘッダー、フッターを配置（v-app-bar、v-footer）](https://www.i-ryo.com/entry/2019/09/04/081606)

Vuetifyに用意されているいろいろなパーツ（パンくず、スライダー、タイル、アコーディオン、カレンダー）を配置してみる。

※参考：[【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置（v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar）](https://www.i-ryo.com/entry/2019/09/11/071054)

# Vue CLI

Vue.jsの拡張機能を任意で追加できるVue CLIでできることを調べて、インストールをしてみた。

※参考：[【Vue.js】Vue CLIをインストールしてみる（CDN、Nuxe.jsとの違い）](https://www.i-ryo.com/entry/2019/10/03/063204)

Vue CLIのプロトタイプとプロジェクトを作ってみた。

※参考：[【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る](https://www.i-ryo.com/entry/2019/10/15/071453)

Vue CLIをブラウザで開発できるダッシュボード（GUIツール）を開いいてみる。

※参考：[【Vue.js】Vue CLIのダッシュボード（GUIツール）を開く](https://www.i-ryo.com/entry/2019/10/18/081939)

# Nuxt.js

Vue.jsの拡張機能全部入りパッケージ「Nuxt.js」でできることを調べた。

※参考：[【Vue.js】Nuxt.jsで何ができるのか調べた（SSR、ルーティング、静的ファイル生成など）](https://www.i-ryo.com/entry/2019/09/18/061153)

Nuxt.jsインストールと簡易ページを作成する（※2019/10/28追加！）

※参考：[【Vue.js】Nuxt.jsをインストールして簡易ページを作成した](https://www.i-ryo.com/entry/2019/10/28/081621)

Nuxt.jsの本式なプロジェクトを作成してみる（※2019/11/01追加！）

※参考：[【Vue.js】Nuxt.jsのプロジェクトを作成する](https://www.i-ryo.com/entry/2019/11/01/062603)

プロジェクトファイルの中身を見てみる。トップページは複数のファイルで構成（※2019/11/12追加！）

※参考：[【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる](https://www.i-ryo.com/entry/2019/11/12/055555)

pagesフォルダに下層ページ作ってrouter-linkコンポーネントで往来できるようにする。（※2019/11/15追加！）

※参考：[【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来](https://www.i-ryo.com/entry/2019/11/15/055614)

パスやGETパラメータから動的にページを作る（※2019/11/27追加！）

※参考：[【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る](https://www.i-ryo.com/entry/2019/11/27/062247)

# Vuex

Vuexの状態管理とは何の状態を管理しているのか（2019/12/03追加！）

※参考：[【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた](https://www.i-ryo.com/entry/2019/12/03/063040)

Vuexはじめの一歩！ストアの値をコンポーネントから読み込んで表示（2019/12/11追加！）

※参考：[【Vue.js】Vuexのストアに値を保管してコンポーネントに表示する](https://www.i-ryo.com/entry/2019/12/11/065540)

ミューテーションに設定した処理を実行する（2019/12/20追加！）

※参考：[【Vue.js】Vuexのミューテーション（mutations）に設定した処理を実行する](https://www.i-ryo.com/entry/2019/12/20/213828)

vuex-persistedstateでローカルストレージにデータを保存（**2020/01/07追加！**）

※参考：[【Vue.js】vuex-persistedstateでデータをローカルストレージに保存する - クモのようにコツコツと](https://www.i-ryo.com/entry/2020/01/07/160350)

今後も随時更新していきます！