概要 Vue.jsでフォーム送信を行う場合、type=”button”のbutton要素やinput要素のclickイベントで処理するのが一般的である。ボタンクリックだけでなくEnterキーを押し […]

スロット 親コンポーネント 子コンポーネント propsとslotの使い分け 文字列や数値などのデータを受け渡すだけならpropsを使うべき。 状態で中の要素が変わるならslotを使うべき。 v-ifなどで中の要素が動的 […]

点数 87点 感想 Vue.3のComposition API、糖衣構文、Piniaについてわかりやすく説明されていて、なかなかの良書だった。 Vite Vue.js3.2からはVue CLIではなくViteがビルドツー […]

概要 Vue.js 3から導入されたComposition APIについて、簡単にまとめました。 Vue.js 2の記述方法はOptions APIと呼ばれる。 Vue.js 3ではComposition APIが導入さ […]

なにをテストするか テストの対象 筆者は以下をコンポーネントのテスト項目としている。 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モードにする。 […]