Vue
■ はじめに https://dk521123.hatenablog.com/entry/2020/04/30/000000 の続き。 目次 【１】関連用語 １）コンポーネント (Component) ２）マウント (Mount) ３）Nuxt(ナクスト) ４）Babel (バベル) 【２】ページの基本的な構成 【３】Vue のライフサイクル…
■ はじめに 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 の続…
■ はじめに 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 を使った画面に対して、 単体…
■ はじめに 親・子コンポーネントのデータの受け渡しなどをメモ。 目次 【１】親から子へのアクセス １）データを渡す ... Prop ２）メソッドを実行する ... ref属性 【２】子から親へのアクセス １）データを渡す ... parent属性 ２）メソッドを実行する ..…
■ はじめに 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…
■ はじめに Jestの実行で、キャッシュしているとエラーにならないが、 キャッシュをクリアすると、単体試験エラーが発生する現象が発生した。 他の方でもそういったケースがある模様。 https://www.ncaq.net/2018/03/02/10/19/22/ その際に得たノウハウを纏…
■ はじめに 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…
■ はじめに https://dk521123.hatenablog.com/entry/2021/01/20/165026 の続き。 ページ間でのパラメータ渡す方法が複数あるようなので 今回は、様々な渡し方について、まとめる。 なお、以下が非常に参考になった。感謝。 https://forsmile.jp/vue/910/ 目…
■ はじめに 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 の続…
■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 の続き。 今回は、Vuetify でよく使う基本的なことをまとめておく。 目次 【１】空白スペース（margin / padding） 【１】空…
■ はじめに 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 で「トップに戻る 」の丸ボタンを作っ…
■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 の続き。 今回は、Vuetify の コンポーネント について取り上げる 目次 【０】始める前に １）デザイン例 / テンプレート ２）App.vue の修正 【１】v-app 【２】v-content / v-main 【…
■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 などで発生した Vuetify に関する トラブルシューティングについて、まとめる 目次 【１】「vue add vuetify」実行時の警告 【２】「npm run serve」実行時のエラー 【１】「vue add vu…
■ はじめに https://dk521123.hatenablog.com/entry/2021/02/06/220603 等で発生したNightWatch に関するトラブルについて、 まとめておく。 目次 【１】警告「WARN Local Chrome version is XX, but the installed chromedriver is for version YY」が表示 …
■ はじめに NightWatch について、業務で扱いそうなので予習。 目次 【１】NightWatch とは？ 【２】環境設定 【３】E2E関連のディレクトリ構成 【４】テスト実行 【５】独自のテストを作成してみる 【１】NightWatch とは？ * Node.js上で動作するE2E のテ…
■ はじめに https://dk521123.hatenablog.com/entry/2021/01/02/000000 の続き。 前回は、JavaScriptでしか実装しなかったが、 今回は、TypeScript + vue-intersect で遅延ロード(Lazy loading)を 実装してみる。 目次 【１】環境設定 １）vue-intersect の…
■ はじめに 簡単な ToDo リストの作成を通して、 Vue + TypeScript について学ぶ。 目次 【１】サンプル 【２】はまったポイント その１：バインドできない 【１】サンプル 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>
■ はじめに https://dk521123.hatenablog.com/entry/2021/01/07/230317 の続き。 今回は、Vueの単体試験をやる上での 基本的なメソッドやTipsを纏める。 目次 【１】主なメソッド １）取得 ２）確認 【２】サンプル 例１：存在・表示/非表示・Text表示チェッ…
■ はじめに https://dk521123.hatenablog.com/entry/2020/10/10/000000 の Vue 版。 VS Code 上で、 Vueを使った開発をしているのだが その際に、入れたほうがいいというVSCodeの拡張機能について 情報を得たので、調べてメモる。 目次 【０】拡張機能一覧 …
■ はじめに VS Code を使って、Vueのプロジェクトに対して、 ブレイクポイントを張って、デバッグするのに 結構ハマったので、メモっておく。 基本的には、以下のサイトを読みながらやればできるが 自分の環境では、それだけだとブレイクポイントを張っても …
■ はじめに https://dk521123.hatenablog.com/entry/2020/12/24/000000 の続き。 Vue Routerで基本的なことを徐々にでるが、メモしておく。 目次 【１】該当しないURLを入力した場合、Not Foundページに飛ばす 【２】各画面遷移前に特定の処理を行いたい（ナ…
■ はじめに vue-clamp ってゆーいうプラグインについて、学ぶ。 ■ デモ * 以下のデモを触ってどういうものかを掴むといいかも。 https://justineo.github.io/vue-clamp/demo/#demo ■ 環境設定 npm i --save vue-clamp Error : Could not find a declaration …
■ はじめに 今回は、VueベースのWebサイトに 比較的容易にグラフを作成できる vue-chartjs について扱う。 目次 【１】vue-chartjs とは？ 【２】デモ 【３】環境設定 【４】グラフ作成手順 【５】サンプル 【１】vue-chartjs とは？ https://vue-chartjs.or…
■ はじめに TypeScript で、axios ってのを扱う可能性がでてきたので、メモ。 目次 【１】axios とは？ 【２】Tips １）キャンセルするには 【３】サンプル 例１：JavaScript での Hello world 例２：TypeScript での Hello world（async/await） 例３：Type…
■ はじめに https://dk521123.hatenablog.com/entry/2021/01/12/000804 の続き。 今回は、Vue の ミックスイン（Mixin）っていう機能を TypeScript で実装してみる。 （まだ、ちゃんと理解しきれてないので、徐々にまとめていく。 ちゃんと理解しないと使わ…
■ はじめに フロントエンドのログで、console.log() 以外に何があるのって 話題になって、console.debug/info/warn/errorもあることが分かった。 https://developer.mozilla.org/ja/docs/Web/API/console#methods Vueを使っているので、vuejs-logger ってい…
■ はじめに Vuex (ビューエックス) ってのを扱う。 目次 【１】Vuex とは？ 【２】関連用語 １）Store（ストア） ２）State（ステート） ３）Actions（アクション） ４）Mutations（ミューテーション） 【３】環境設定 １）Vue.js devtools ２）vuex-module-…
■ はじめに Vue で、国際化（他言語化）を行う際に vue-i18n を使うようなので、メモ。 目次 【１】そもそも i18n とは？ 【２】環境設定 【３】$t("キー")について 【４】サンプル 【１】そもそも i18n とは？ i18n とは、internationalization（国際化）の…
■ はじめに https://dk521123.hatenablog.com/entry/2020/12/23/103209 https://dk521123.hatenablog.com/entry/2020/12/22/192553 の続き。 Vueでの単体試験を行う必要があるので、メモ。 目次 【１】環境設定 【２】(個人的に)はまったこと その１：@Compo…
■ はじめに vue-intersect ってのを扱う可能性があるのでメモ。 目次 【１】vue-intersect とは？ 使用目的 イベント 【２】環境設定 【３】サンプル 【１】vue-intersect とは？ * Intersection Observer API を使った遅延ロードするVueコンポーネント => …
