blog logo

Vue.jsのv-modelの使い方・仕組みについて解説する

thumnail
2019-12-03

v-modelとは

双方向のデータバインディングを実装するラッパー

公式サイトには次のように書かれている。

ou can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.

参考文献:「Vue.js」 https://vuejs.org/v2/guide/forms.html

v-modelを使うと双方向データバインディングを実装できる。双方向データバインディングというのはざっくりいうと2つのコンポーネントで1つのデータの状態を共有しあう状態のことを指す。片方のデータが更新されたら、その更新されたデータをもう片方に通知することで常に双方のコンポーネントが同じデータを持っている状態になるのだ。このv-modelは双方向バインディングを実現するために使用するディレクティブだ。公式サイトによるとv-modelは

<input
  v-bind:value="text"
  v-on:input="text = $event.target.value"
>

を省略して

<input v-model="text">

と書いているだけだ。つまりv-bindとv-onの組み合わせのシンタックスシュガーになっているのだ。v-bindとv-onがいまいち何の役割をもつ属性なのかわからない人がいるかもしれないのでそれぞれ解説する。

v-bindとは

データをバインドさせる

v-bindはプロパティをコンポーネントに対してバインドさせる。親要素から子要素に対してデータをバインドさせている状態になる。例えば次のようにsrcをバインドした場合は

<img v-bind:src="imageURL">

リアクティブにimageURLの値が属性値として渡される。リアクティブに値が渡されるというはこのimageURLの値を他の画像のURLに変更すると表示される画像も変わるということだ。またv-bindの表記は省略可能で次のように書くこともできる。

<img :src="imageURL">

Vue.jsを触ったことある人なら:classという属性値が付いたディレクティブを見たことがあるかもしれないが、これはv-bind:classの省略系なのだ。

v-onとは

イベントを受け取る

イベントハンドリング(v-on)はイベントを受け取ることができる。例えばbuttonタグのclickイベントを受け取るには

<button v-on:click="submit"></button>

と書けば良い。methodsで定義したsubmitを引数に指定することで、このボタンがクリックされた時にクリックイベントをsubmitに渡すことができる。v-onもv-bind同様、省略方法があり、@を使って書くことが可能だ。

<button @click="submit"></button>

v-modelについて再度整理

v-modelの仕組みv-bind、v-onの仕組みがわかったのでv-modelの仕組みもわかるはず。次の2つのコードは

// パターン1
<input v-bind:value="text" v-on:input="text = $event.target.value" >

// パターン2
<input :value="text" @input="text = $event.target.value"

v-bind:valueでinput要素に値を渡して、v-on:inputでinput要素が返す値をtextプロパティに格納しているだけだ。もちろんこのコードは可読性を考慮してv-modelを使って以下のように書くのが良い。

<input v-model="text">

まとめ

  • v-modelを使うと双方向バインディングを実装できる
  • v-modelはv-bindとv-onを組み合わせたディレクティブのシンタックスシュガー
profile

KATUO

web developer

六本木のミドルベンチャーでwebエンジニアをやってます。普段はフロントからサーバーサイド、インフラ周りといった領域を幅広く触ってます。

twitter-icongithub-icon

KATUBLO

Copyright since 2018 KATUO All Rights Reserved.