LoginSignup
567

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-10-27

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

※2020/01/07追記vuex-persistedstateでローカルストレージにデータを保存

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で下層ページに往来

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

※参考:【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る

Vuex

Vuexの状態管理とは何の状態を管理しているのか(2019/12/03追加!)

※参考:【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた

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

※参考:【Vue.js】Vuexのストアに値を保管してコンポーネントに表示する

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

※参考:【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行する

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

※参考:【Vue.js】vuex-persistedstateでデータをローカルストレージに保存する - クモのようにコツコツと

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
567