Vue.js
Node.jsのフレームワークExpress。存在は前から知っていたけどイマイチ何ができる物なのかわかっていなかった。以前の記事でRest APIについて調べたことをキッカケに、ExpressとJSフレームワーク(Vue、React、Angularなど)の関係についても調べました。そ…
Vue.jsの続きです。前回はVuexのミューテーション(mutations)に設定した「いいね」アイコンのカウント処理を読み込んで実行しました。今回はvuex-persistedstateでそのカウント数をローカルストレージに保存してみたく。それでは行きましょう!
Vuexの続きです。前回はVuexストアのステートに保管したデータを読み込みました。今回はミューテーション(mutations)に設定した処理を読み込んで実行してみます。それでは行きましょう!
Vuexの続きです。前回はVuexが何を管理しているのか調べました。Vuexのストアでコンポーネントを跨いで参照するデータを一元管理するということでした。今回はストアに実際にデータ(値)を置いて、コンポーネントから表示してみます。それではいきましょう!
Vue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていきました。今回からは状態管理ライブラリ「Vuex」に取り組んでみます。まず「状態管理」とはなんぞや、何の状態を管理するのか?というところからいろいろ調べてみました。それではいきましょう!…
Vue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと下層ページを往来しました。今回は$route.paramsと$route.queryを使ってパスやGETパラメータから動的にページを作ってみたく。それではいきましょう!
Vue.jsの続きです。前回はNuxt.jsプロジェクトのTOPページのコードを読み解きました。今回は下層ページを作ってみたく。それではいきましょう!
Vue.jsの続きです。前回はNuxt.jsのプロジェクトを作成しました。今回はそのプロジェクトファイルの中身を見てみる。それではいきましょう!
Vue.jsの続きです。前回はNuxt.jsのインストールと簡易ページを作成しました。ハローワールド的なペライチページでした。今回は本式なプロジェクトをつくってみる。それではいきましょう!
Vue.jsの続きです。前回までVue CLIをインストールしてみた。今回はNuxt.jsをインストールしてみる!途中、何度かエラーが起こったが、調べながらなんとか進めた。それでは行きましょう!
Vue CLIの続きです。前回はVue CLIのプロジェクトを作ってみました。今回はプロジェクトのダッシュボード(GUIツール)を開いてみます。それではいきましょう!
Vue.jsの続きです。前回はVue CLIをインストールしてみました。今回はプロトタイプとプロジェクトを作ってみます。それではどうぞ!
Vue.jsの続きです。前回はNuxt.jsで何ができるか調べました。今回はNext.jsのインストール…の前にVue CLIが未体験だったのでこちらのインストールをやってみます。それではいきましょう!
Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vuetifyにトライしました。今回からはWebアプリケーション開発のフレームワーク、Nuxt.jsにトライ。今回は概要を掴むために調べたことについて。それではいきましょう!
Vue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置してみました。今回はさらにいろんなパーツを配置してみます。パンくず(v-carousel)、スライダー(v-carousel)、タイル(v-card)、アコーディオン(v-expansion-panels)、カレンダー(v-cale…
Vue.jsの続きです。前回はボタンを配置してみました。今回はヘッダー、フッターを配置してみます。v-app-barとv-footerを使います。それではいきましょう!
Vue.jsの続きです。前回はVuetifyを事始めました。今回はもう少し進んで、ボタンを3つ並べてみました。v-layout、v-flex、v-btnなどを使いました。
Vue.jsの続きでず。前回まではコンポーネントについて触れましたが今回からはVue.jsのUIフレームワーク、Vuetifyにトライしてみます。CDNリンクで事始めることができました。それではいきましょう!
Vue.jsシリーズの続きです。前回はコンポーネントにカウンターを仕込みました。今回はコンポーネントに値を渡してみます。propsオプションを使います。それではいきましょう!
Vue.jsシリーズ続きです。前回はコンポーネントでハローワールド的一歩を踏みしめました。今回はコンポーネントにカウンターを仕込んでみます。ポイントはdataオプションの値を無名関数にすることです。それではいきましょう!
Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携でしたが、今回からコンポーネント。コンポーネントって部品を一まとめにする機能ですが、独自のタグ名を命名できます。これを見かけるとJSフレームワーク感が高まるんですがw、いよいよ自分でも実…
Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その2としてVueインスタンス以外のコードを見ていきました。localStorageを読み込む箇所も見受けられました。今回がラスト。Vueインスタンス本…
Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。今回から詳細編。ひとまずVueインスタンス本体以外の部分を見ていきます。localStorageの設定も…
Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はHTML、CSS編でした。今回はJS編。localStorageと関わる部分を見たかったけどボリュームがあったのでまずは全体像から。それではいきましょう!
Vue.jsで単純なものを作るとリロードしたときに初期状態に戻ってしまって儚い(はかない)。。かといってデータベースと連携したものをつくるのはまだハードルが高い。前段階として以前にも触れたLocalstrageと連携して値を保存してみたい。公式サイトのサン…
Google Chartsの記事で描画したグラフとVue.jsの連動に挑戦。入力した数字
Vue.jsの続きです。前回はwatch(監視プロパティ)で簡単なクイズを作りました。今回はtransitionタグというVue.jsの独自タグでアニメーション効果をつけます。それでは、いきましょう!
Vue.jsの続きです。前回はcomputed(算出プロパティ)で割り勘アプリを作りました。今回はwatch(監視プロパティ)で簡単なクイズを作ってみます。それではいきましょう!
Vue.jsの続きです。前回はv-modelでリアルタイムにフォームの入力文字を表示した。今回はv-modelのcomputed(算出プロパティ)で複数の処理をリアルタイムに行う。「割り勘アプリ」を作る。(おまけで「こち亀アプリ」も作るw)それではいきましょう!
Vue.jsの続きです。前回はv-vindでボタンでリアルタイムにclass名の追加、削除をした。今回はv-modelでリアルタイムに「データバインディング」体験してみる。データバインディングとは何ぞや?フォームに入力した情報をリアルタイムで画面に反映できる。ど…