Edited at

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

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

※2019/11/15追記下層ページ作ってrouter-linkコンポーネントで往来


Vue.js基本


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

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

※参考:三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた!


イベント(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)をやってみた!


データバインディング


属性変更(v-bind)

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

※参考:【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)


入力テキスト反映(v-model)

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

※参考:【Vue.js】v-modelデータバインディング事始め(リンダリンダの歌詞を変えてオリジナルラブソングを作る)


算出プロパティ(computed)

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

※参考:【Vue.js】computed(算出プロパティ)で割り勘アプリを作る(おまけでこち亀アプリも)


監視プロパティ(watch)

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

※参考:【Vue.js】watch(監視プロパティ)で戦国時代クイズを作った


Vue.js応用


アニメーション(transitionタグ)

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

※参考:【Vue.js】transitionタグでアニメーション効果をつける


Google Chartsと連動

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

※参考:【Vue.js】Google Chartsのグラフと連動させる


JSON読み込み(axios)

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

※参考:【Vue.js】axiosでJSONファイルを読み込む(酒が飲めるぞ!編)

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

※参考:【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編)


localStorage

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

その1:HTML、CSS編

※参考:【Vue.js】localStorageと連携したTodoリストを読み解く(HTML、CSS編)

その2:JS全体像編

※参考:【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1)

その3:JS詳細編(localStorage設定もあり)

※参考:【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)

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

※参考:【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-3)


コンポーネント

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

※参考:【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)

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

※参考:【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!)

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

※参考:【Vue.js】コンポーネントにpropsオプションで値を渡す


UIフレームワーク「Vuetify」

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

※参考:【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた

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

※参考:【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-container、v-layout、v-flex、v-btn)

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

※参考:【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)

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

※参考:【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar)


Vue CLI

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

※参考:【Vue.js】Vue CLIをインストールしてみる(CDN、Nuxe.jsとの違い)

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

※参考:【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る

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

※参考:【Vue.js】Vue CLIのダッシュボード(GUIツール)を開く


Nuxt.js

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

※参考:【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)

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

※参考:【Vue.js】Nuxt.jsをインストールして簡易ページを作成した

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

※参考:【Vue.js】Nuxt.jsのプロジェクトを作成する

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

※参考:【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる

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

※参考:【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来

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