なにをテストするか テストの対象 筆者は以下をコンポーネントのテスト項目としている。 templateでv-on, v-bind:class, v-bind:attrsが正しく動作するか propsが正しく受け取れるか […]

書籍「後悔しないためのVueコンポーネント設計」のまとめ。 点数 75点 感想 コンポーネントの設計がわかりやすく、論理的に説明されていた。 テストしやすいコンポーネントは「機能が少なく状態を持たない」というのは間違いな […]

概要 vue serveコマンドはプロジェクトを作成せずに、.vueファイルを単体で実行することができる。 しかし、Vue CLI5では動作しない。（2022年4月現在） 解決法 Vue CLI4では正常に動作する。 n […]

テスト 単体テスト Jestの準備 1. Vue CLIのJestプラグインの導入 npx vue create xxxでのプロジェクト作成時にUnit Testingを有効にし、テストライブラリとしてJestを選択する […]

Vuex Vuexの準備 npx vue create xxxでのプロジェクト作成時に有効にする。（既存のプロジェクトにはnpx vue add vuexで追加する） src/store/index.jsに雛形が生成され […]

Vue Router Vue Routerの準備 npx vue create xxxでのプロジェクト作成時に有効にする。 Use history mode for router?: Yesでhistoryモードにする。 […]

Vue CLI Vue CLIの基本 npm install @vue/cli npx vue create my-cli（defaultを選択） cd my-cli npm run serveで実行、npm run b […]

コンポーネント(応用) <component>要素 コンポーネントの入れ物であり、コンポーネントを動的に切り替えることができる。 タブで表示内容を切り替える場合などに便利。 定義 呼び出し <compo […]

コンポーネント new Vue()とコンポーネントの違い dataオプションはコンストラクタの場合はオブジェクトだが、コンポーネントの場合はオブジェクトを返す関数でなければならない。※コンポーネントの場合は、それぞれが独 […]

ディレクティブ v-modelを利用するとvalue属性は無視される テキストボックスの初期値はvalue属性ではなくv-modelで紐づいた変数の値となる。 ラジオボタン、チェックボックス、選択ボックスも同様に、che […]

書籍「Nuxt.jsビギナーズガイド」のまとめ。 点数 88点 感想 細かくわかりやすく説明されていて、とてもよく理解することができた。 基本 メソッドと算出プロパティの違い 算出プロパティは引数を持つことができない 。 […]

書籍「Web技術速習テキスト 実践編」のまとめ。 点数 84点 感想 書籍名のイメージとは異なり、Vue.js、Vuetify、Firebaseについての解説本だった。 説明がとても丁寧で、Vue.jsを扱っている他の書 […]