ITVuetifyを使った開発6 ~数値を扱う際のテキストボックスの設定~
テキストボックスで数値を扱う際には変数の型に注意する必要があります。数値として処理する方法と、Vuetifyで数値の入力に利用できるコンポーネントについて紹介します。
Vue.js
IT
ITVuetifyを使った開発 5 ~ドロップダウンの連動~
Vuetifyでは「v-select」でドロップダウンを作成できます。本記事でで、2つの連動するドロップダウンの作成方法やドロップダウンの選択肢を変更したときに発生するイベントの利用方法についてまとめています。
ITVuetifyを使った開発 4 ~プロジェクトに後からVue Routerを追加・設定する~
Vuetifyのプロジェクトに対してルーティングを実装します。ルーティングにはVue Routerを利用します。Vue Routerの手動でのインストールや設定方法について、実際の画面を用いながらまとめています。
ITVuetifyを使った開発 3 ~ナビゲーションとAppバーのカスタマイズ~
Vuetifyの「v-app-bar」や「v-navigation-drawer」コンポーネントの設定やカスタマイズ方法について、実際に動作確認を行いながら整理しました。
ITVuetifyを使った開発 2 ~Vuetifyの色の設定~
Vuetifyでの色の指定方法について確認します。「color」と「class」の2つの属性で色を指定できます。また、「theme」で全体の配色を指定できます。これらの指定方法やカスタマイズ方法をまとめています。
ITVuetifyを使った開発 ~環境構築とHellowWorld~
VueとVuetifyを使った開発環境の初期構築と簡単な画面の作成を行います。普通だとややこしいデザインをVuetifyを利用して簡単に作成してみましょう。
IT[Vue.js]子で変更した内容を親に反映させたい
子コンポーネントでオブジェクトのリストを追加・削除して、その内容を親に反映させる方法について調査実装したため、その方法をまとめます。またシンプルなテキスト型の親子間での反映についても記載しています。
IT[Vue.js] 配列を毎回置換する際のrefとreactiveの使い方
Vue.jsのrefやreactive（リアクティブ）について、APIから取得したオブジェクトの配列データを描画する具体例を用いながら理解を深めていきます。うまく描画されずに困っている方の参考になれば幸いです。
ITVSCodeでのデバック前後でVue.jsを自動的に起動・停止する方法
VSCodeでVue.jsのアプリを作成し、デバッグを開始してもアプリ自体は自動で起動しないためデバッグに失敗します。アプリを毎回手動で起動するのも手間ですので、VSCodeのタスクを利用して自動化する方法をお伝えします。