VueJS開発チップス集

VueJS開発で知っていると役立つ情報をまとめます。

Visual Studio Codeの設定

Veturをインストール

Vetureを入れるとVueJSの開発が楽になります。

settings.jsonの設定

以下の設定を入れるとコードの整形が楽になります。

settings.jsonは、Macをお使いの場合には、「command + ,」で設定ウィンドウを開き、検索欄に「json」と打ち込むと探せると思います。

インポート

@を使用する

@は、srcディレクトリを指すので、以下のようにモジュールをインポートできます。

モジュールのインストール

Sassを導入

Sassを導入します。

モジュールのインストール

Webpack設定

Webpackに設定を追加します。

このファイルは、webpackの設定ファイルです。

設定例は、ここを確認してください。

関連記事

style

scopedについて

styleタグにscopedをつけると、そのファイル内のコンポーネントのみstyleが適用されます。

小技

v-forによるレンダリング

以下のようにコンポーネントを複数記述するのではなく、v-forを使ったレンダリングにて対処できます。

App.vue(Todoアイテム作成) -> TodoList.vue -> TodoItem.vueの順にデータが渡されるとします。

プロパティ変更監視(watch)

watchを使用すると特定のプロパティが変更された時に行いたい処理を実装できます。

上記のコードでは、+1ボタンがクリックされた時、dataのnumプロパティが変化します。

それをwatchが検出し、num()関数を実行します。

watchのnumとdataのnumは一致していなければなりません。

子コンポーネントを参照(ref)

refを使うと子コンポーネントを参照できます。

親コンポーネントから参照したいコンポーネントをref=”modal”のようにしています。

そして、親コンポーネントから子コンポーネントのメソッドを$refsを使って呼び出すことができるようです。

propsを書き換えたい場合

propsは、作成後にその値を変更することができません。

しかし、propsから渡されたデータを書き換えたいという場合があると思います。

例えば、Todoアプリでは一度作成したTodoの内容を書き換えるときにpropsとして渡したデータを変更したい場合があります。

その場合は、「:value(v-bind:value)」を使うと書き換えることができます。

実際にデータを書き換えるためには、書き換え処理が必要ですが、上記はブラウザ上に表示したフォーム上で値を変更してもエラーが発生なくなるための変更です。

特定のデータを見つけて、更新する方法

まずはデータの見つけ方です。

次のデータ構造があるとします。

この中から_id:2 を見つけたいとします。その場合は、findIndexを使うと良さそうです。

JavaScriptの構造体は、0からカウントされるので、上記では「1」が返却されるはずです。

そして、Vue.setを使うと特定のデータを更新することができます。