Vue

【Vue】Vue ~ 基本編 ~

Vue

■ はじめに https://dk521123.hatenablog.com/entry/2020/04/30/000000 の続き。 目次 【1】関連用語 1)コンポーネント (Component) 2)マウント (Mount) 3)Nuxt(ナクスト) 4)Babel (バベル) 【2】ページの基本的な構成 【3】Vue のライフサイクル…

【Vue】Jestを使った Vue / TypeScript の単体試験 ~ axios / あれこれ 編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/07/230317 https://dk521123.hatenablog.com/entry/2021/01/27/225148 https://dk521123.hatenablog.com/entry/2021/03/13/000000 https://dk521123.hatenablog.com/entry/2021/03/23/231011 の続…

【Vue】Jestを使った Vue / TypeScript の単体試験 ~ axios 編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/07/230317 https://dk521123.hatenablog.com/entry/2021/01/27/225148 https://dk521123.hatenablog.com/entry/2021/03/13/000000 の続き。 今回は、Vue 内で、axios を使った画面に対して、 単体…

【Vue】Vue ~ 基本編:親・子コンポーネントのやり取り ~

Vue

■ はじめに 親・子コンポーネントのデータの受け渡しなどをメモ。 目次 【1】親から子へのアクセス 1)データを渡す ... Prop 2)メソッドを実行する ... ref属性 【2】子から親へのアクセス 1)データを渡す ... parent属性 2)メソッドを実行する ..…

【Vue】Jestを使った Vue / TypeScript の単体試験 ~ 非同期編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/07/230317 https://dk521123.hatenablog.com/entry/2021/01/27/225148 の続き。 今回は、flush-promises っていうものを知ったので、メモ。 公式サイト https://vue-test-utils.vuejs.org/ja/guid…

【JS】【TS】JS単体試験ツール Jest ~ キャッシュ関連 ~

■ はじめに Jestの実行で、キャッシュしているとエラーにならないが、 キャッシュをクリアすると、単体試験エラーが発生する現象が発生した。 他の方でもそういったケースがある模様。 https://www.ncaq.net/2018/03/02/10/19/22/ その際に得たノウハウを纏…

【Vue】Vuetify ~ ローディング中の表示 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 https://dk521123.hatenablog.com/entry/2021/02/21/162236 https://dk521123.hatenablog.com/entry/2021/02/20/000000 http…

【Vue】Vue Router ~ パラメータの受け渡し ~

Vue

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/20/165026 の続き。 ページ間でのパラメータ渡す方法が複数あるようなので 今回は、様々な渡し方について、まとめる。 なお、以下が非常に参考になった。感謝。 https://forsmile.jp/vue/910/ 目…

【Vue】Vuetify ~ ユーザへの通知 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 https://dk521123.hatenablog.com/entry/2021/02/21/162236 https://dk521123.hatenablog.com/entry/2021/02/20/000000 の続…

【Vue】Vuetify ~ 基本編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 の続き。 今回は、Vuetify でよく使う基本的なことをまとめておく。 目次 【1】空白スペース(margin / padding) 【1】空…

【Vue】Vuetify + TypeScript で トップに戻る 丸ボタンを作る

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 https://dk521123.hatenablog.com/entry/2021/02/21/162236 の続き。 今回は、Vuetify で「トップに戻る 」の丸ボタンを作っ…

【Vue】Vuetify ~ コンポーネント編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 の続き。 今回は、Vuetify の コンポーネント について取り上げる 目次 【0】始める前に 1)デザイン例 / テンプレート 2)App.vue の修正 【1】v-app 【2】v-content / v-main 【…

【トラブル】【Vue】Vuetify に関するトラブルシューティング

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 などで発生した Vuetify に関する トラブルシューティングについて、まとめる 目次 【1】「vue add vuetify」実行時の警告 【2】「npm run serve」実行時のエラー 【1】「vue add vu…

【トラブル】NightWatch に関するトラブルシューティング

■ はじめに https://dk521123.hatenablog.com/entry/2021/02/06/220603 等で発生したNightWatch に関するトラブルについて、 まとめておく。 目次 【1】警告「WARN Local Chrome version is XX, but the installed chromedriver is for version YY」が表示 …

【NightWatch】Vue + NightWatch で E2Eテスト をする

■ はじめに NightWatch について、業務で扱いそうなので予習。 目次 【1】NightWatch とは? 【2】環境設定 【3】E2E関連のディレクトリ構成 【4】テスト実行 【5】独自のテストを作成してみる 【1】NightWatch とは? * Node.js上で動作するE2E のテ…

【Vue】TypeScript + vue-intersect で遅延ロードを実装する

Vue

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/02/000000 の続き。 前回は、JavaScriptでしか実装しなかったが、 今回は、TypeScript + vue-intersect で遅延ロード(Lazy loading)を 実装してみる。 目次 【1】環境設定 1)vue-intersect の…

【Vue】Vue + TypeScript で 簡単な ToDo リストを作成

Vue

■ はじめに 簡単な ToDo リストの作成を通して、 Vue + TypeScript について学ぶ。 目次 【1】サンプル 【2】はまったポイント その1:バインドできない 【1】サンプル todo.vue <template> <div> <h1>Todo List</h1> <input type="text" placeholder="Input your ToDo!" @keyup.enter="onEnter"> <div v-if="this.toDoList.length > 0">{{ this.toDoList.length }} 件を表示</div> <ul> </ul></div></template>

【Vue】Jestを使った Vue / TypeScript の単体試験 ~ 基本編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/07/230317 の続き。 今回は、Vueの単体試験をやる上での 基本的なメソッドやTipsを纏める。 目次 【1】主なメソッド 1)取得 2)確認 【2】サンプル 例1:存在・表示/非表示・Text表示チェッ…

【VS Code】Visual Studio Code ~ Vue拡張 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/10/10/000000 の Vue 版。 VS Code 上で、 Vueを使った開発をしているのだが その際に、入れたほうがいいというVSCodeの拡張機能について 情報を得たので、調べてメモる。 目次 【0】拡張機能一覧 …

【Vue】VS Code で Vue をデバッグするには

■ はじめに VS Code を使って、Vueのプロジェクトに対して、 ブレイクポイントを張って、デバッグするのに 結構ハマったので、メモっておく。 基本的には、以下のサイトを読みながらやればできるが 自分の環境では、それだけだとブレイクポイントを張っても …

【Vue】Vue Router ~ 基本編 ~

Vue

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/24/000000 の続き。 Vue Routerで基本的なことを徐々にでるが、メモしておく。 目次 【1】該当しないURLを入力した場合、Not Foundページに飛ばす 【2】各画面遷移前に特定の処理を行いたい(ナ…

【Vue】vue-clamp / テキスト行数指定表示

Vue

■ はじめに vue-clamp ってゆーいうプラグインについて、学ぶ。 ■ デモ * 以下のデモを触ってどういうものかを掴むといいかも。 https://justineo.github.io/vue-clamp/demo/#demo ■ 環境設定 npm i --save vue-clamp Error : Could not find a declaration …

【Vue】vue-chartjs / グラフ作成 ~ 入門編 ~

■ はじめに 今回は、VueベースのWebサイトに 比較的容易にグラフを作成できる vue-chartjs について扱う。 目次 【1】vue-chartjs とは? 【2】デモ 【3】環境設定 【4】グラフ作成手順 【5】サンプル 【1】vue-chartjs とは? https://vue-chartjs.or…

【JS】【TS】axios ~ 外部API通信ライブラリ ~

■ はじめに TypeScript で、axios ってのを扱う可能性がでてきたので、メモ。 目次 【1】axios とは? 【2】Tips 1)キャンセルするには 【3】サンプル 例1:JavaScript での Hello world 例2:TypeScript での Hello world(async/await) 例3:Type…

【Vue】Vue Mixins + TypeScript ~ 入門編 ~

Vue

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/12/000804 の続き。 今回は、Vue の ミックスイン(Mixin)っていう機能を TypeScript で実装してみる。 (まだ、ちゃんと理解しきれてないので、徐々にまとめていく。 ちゃんと理解しないと使わ…

【Vue】Vueプラグイン + TypeScript ~ 入門編 ~

Vue

■ はじめに フロントエンドのログで、console.log() 以外に何があるのって 話題になって、console.debug/info/warn/errorもあることが分かった。 https://developer.mozilla.org/ja/docs/Web/API/console#methods Vueを使っているので、vuejs-logger ってい…

【Vue】Vuex ~ 入門編 ~

Vue

■ はじめに Vuex (ビューエックス) ってのを扱う。 目次 【1】Vuex とは? 【2】関連用語 1)Store(ストア) 2)State(ステート) 3)Actions(アクション) 4)Mutations(ミューテーション) 【3】環境設定 1)Vue.js devtools 2)vuex-module-…

【Vue】vue-i18n / 国際化 ~ 入門編 ~

Vue

■ はじめに Vue で、国際化(他言語化)を行う際に vue-i18n を使うようなので、メモ。 目次 【1】そもそも i18n とは? 【2】環境設定 【3】$t("キー")について 【4】サンプル 【1】そもそも i18n とは? i18n とは、internationalization(国際化)の…

【Vue】Jestを使った Vue / TypeScript の単体試験 ~ 入門編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/23/103209 https://dk521123.hatenablog.com/entry/2020/12/22/192553 の続き。 Vueでの単体試験を行う必要があるので、メモ。 目次 【1】環境設定 【2】(個人的に)はまったこと その1:@Compo…

【Vue】vue-intersect / 遅延ロード

Vue

■ はじめに vue-intersect ってのを扱う可能性があるのでメモ。 目次 【1】vue-intersect とは? 使用目的 イベント 【2】環境設定 【3】サンプル 【1】vue-intersect とは? * Intersection Observer API を使った遅延ロードするVueコンポーネント => …