Vue.jsとVueValidateのよく使う機能のメモ書き
Vue.js
代表的なオプション
el: 既存DOMにVueインスタンスをマウントする
- elを指定しないで$mountで new Vue().$mount(“#app”)のようにも書ける
methods
components
components: { searchForm }
のように設定すると
<search-form></search-form>
このように呼び出すことが出来る。
JS側はキャメルケースでもハイフンでも大丈夫だが、HTML側ではハイフン区切りで呼ぶ出す必要がある
代表的なディレクティブ
v-on
- イベントハンドリング
- v-on:inputのようにすると入力イベントを受け取る
- v-onとv-bindはよく使うので省略記法が用意されている
- v-on:clickは@clickと書ける
- イベント修飾子で@submit.prevent=“onSubmit"のように書くとSubmit時にリロードしない等できる
v-bind
- HTML属性をモデルの更新でリアルタイムに更新する
- v-bind:classはよく使う
- :classに省略して書ける
v-bind:selected
- :selectedで書ける
- selected=“{{ hoge == fuga }}"と書くと怒られる
- :selected=“hoge == fuga” とv-bindを使って{{}}は使わずに文字列で条件式を書くとうまくいく
v-model
- 双方向データバインディング用
- ビューの入力内容をモデルに反映、モデルの変更をビューに反映という使い方ができる
- v-model.trimのようにするとユーザーの入力を自動でトリムしてくれる
- 入力値をリアルタイムにバリデーションをかけたい時にもv-modelだと便利
- ユーザーの入力値をそのまま保存に使いたい時にも便利。本来はReactのように親コンポーネントに値を渡してstateを更新のような実装が状態管理としては良いんだけど、実装コストをかけずにサクッと作りたい時に良い。
v-cloak
<div v-cloak> {{ message }} </div>
v-for
- ループを回すのに使う
<option v-cloak v-for="data in list" :value="data.id" :key="data.id"> </option>
- 必ずユニーク値で:keyをつける
VueValidate
- $vにバリデーションデータが入っている
代表的なメソッド
- $touch
- $v.name.$touchのようにすると$dirtyフラグをtrueにする
- これによりエラー検知の対象になる
代表的なプロパティ
- $dirty
- 一度も触っていない場合はこのフラグはfalse
- 一度でも変更を加えるとtrueになる
- $error
- $v.name.$errorのように項目ごとにエラーフラグをとれる
- $dirtyがtrueになっていないと、このフラグが無視される
エラーメッセージを動的に出す
- 各バリデーションルールのフラグがとれるので、その値を見て用意したエラーメッセージを表示する
<span v-if="$v.title.$error && !$v.title.required"> タイトル名は必須です</span>
- コレクションデータの場合でも1つずつtouchする必要はなく、$v.array.$touch()だけでOK