kz’s blog

興味のあることについて書いていきます。

プログラミング-Vue.js

Vue.js で Firebase を利用するときに警告が出た場合の対処法

警告が出る場合 import firebase from "firebase"; このようにimportすると下記のような警告が出力されます。 It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to …

Vue.js でログイン機能を実装する

前提 この記事は@vue/cliを使用した内容となっております。 バージョン "vue": "^2.5.17", "vue-router": "^3.0.1", "vuex": "^3.0.1" ページ構成 ホーム プロフィール ログイン このうち、プロフィールはログイン認証が必要なページとします。 ソースファイ…

Github Pages に Vue.js の SPA サイトを公開して運営するまで

はじめに 基本的に以前の記事に書いてある通りに実行すれば Github Pages で SPA サイトを公開することができると思います。 今回は特にハマった点や、サイトを運営するために必要なことを記述していきます。 Github リポジトリ作成 通常通りに作成します。…

Vue.js で Buefy のラジオボタンの @change が拾えなくてハマった

はじめに 通常の Vue.js で作成したラジオボタンを Buefy で実装したら@changeが動作しなくなってしまいました。 調べても解決までに時間がかかったので、解決方法を書いておきます。 ちなみに、@changeはv-on:changeの省略記法になります。詳細はこちらを参…

Vue.js の methods と computed の違いを検証して理解する

はじめに jp.vuejs.org 公式の算出プロパティ(computed)を参照したところ、あまりピンと来なかったので、検証をして理解を深めました。 methods と computed の違い キャッシュされるかされないか キャッシュされる =computed キャッシュされない =methods …

Vue.js でラジオボタンのコンポーネントを作成する

ラジオボタンのコンポーネント テンプレート <template> <label> <input type="radio" :value="value" :checked="value === checkedValue" @change="$emit('change', $event.target.value)" /> <span v-if="label">{{ label }}</span> <span v-else>{{ value }}</span> </label> </template> スクリプト <script> export default { name: 'RadioButto…

Windows で Vue.js を開発する環境を整える

環境 Windows10 Enterprise nodist インストール github.com ダウンロードしたインストーラーを実行してインストールします。 コマンドプロンプト起動 以下作業はコマンドプロンプトで行うので起動しておいて下さい。 nodist バージョン確認 $ nodist -v 0.8…

Vue Router のルーティングをネストする

前提 画面構成 Route 設定 ページの作成 ユーザ ユーザホーム ユーザ詳細 ユーザ編集 App.vue 修正 終わりに 前提 Vue Router をインストールしていない場合はしておいて下さい。 画面構成 下記のような画面構成を目指します。 ホーム ユーザ ユーザ詳細 ユ…

Vue UI で axios を導入し ajax 通信をできるようにする

Vue.js から API を介してデータの取得等を行う際に axios (Vue で ajax を利用できるようになる) を使用します。 バージョン確認 プロジェクトの作成 axios インストール ソースコード修正 axios を使用する準備 axios を使用して API にアクセスし、データ…

Vue UI で Bootstrap を導入しデザインを変更する

バージョン確認 プロジェクトの作成 Bootstrap インストール ソースコード修正 Bootstrap を使用する準備 Bootstrap を使用するコンテンツを配置する。 確認 バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 $ vue --version 3.0.0-rc.10 プロジェクトの作…

Vue UI で作成した静的ファイルを GitHub Pages に公開する

簡単にできると思ったけど意外と手こずったのでやったことをまとめておきます。 前準備 GitHub Pages で公開できるように GitHub 側の設定を済ませておいて下さい。 公開するページの情報 Git リポジトリプッシュ先 リポジトリルート/sample/user-manager/ U…

Vue UI を使ってユーザ管理機能を作る③

www.kz62.net 前回の記事ではユーザ編集機能の一部を作成しました。今回はその続きをやっていきます。 ユーザ追加機能の作成 新規登録ボタン追加 追加機能の確認 ユーザ削除機能の作成 削除ボタン追加 削除機能の確認 終わりに 今回作成したソースコード Git…

Vue Router で動的ルートマッチングをする

前提 Vue Router をインストールしていない場合はしておいて下さい。 Route 設定 src/router.js export default new Router({ routes: [ { path: '/user/:id', name: 'user-edit', component: () => import('./views/UserEdit.vue') } ] }) path プロパティ…

Vue UI を使ってユーザ管理機能を作る②

www.kz62.net 前回の記事ではユーザ管理機能の一覧表示まで作成しました。今回はその続きをやっていきます。 ユーザ編集の作成 パスの追加 ユーザ編集の vue を作成する 入り口を作る ID で指定したユーザを表示する 完了ボタンの設置 編集機能の確認 ユーザ…

Vue UI を使ってユーザ管理機能を作る①

バージョン確認 プロジェクト作成 ユーザ管理機能の構成 ユーザ管理の作成 ファイル名変更 パスの変更 ユーザデータの作成 ユーザを一覧で表示 確認 バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 $ vue --version 3.0.0-rc.7 vue のバージョンは 3.0 以…

Vue CLI 3 の Vue UI を使って画面を表示させる

バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 インストール $ npm install -g @vue/cli npm install -g @vue/cli にすることで Vue CLI のバージョン3 以降がインストールされるっぽいですね。 npm install -g vue-cli にするとバージョン2 になるみた…

Vue.js の v-for でエラーが出た時の対処

ループ時のキー未設定によるエラーの対処 修正前コード <div v-for="data in datas"> エラー内容 Elements in iteration expect to have 'v-bind:key' directives. どうやらループ時の一意になるキーを設定しなければならないようなので以下のように修正する。 修正後コード datas が配</div>…