《Vue.js》v-modelとは?使い方を初心者向けにわかりやすく解説

Vue.js

v-modelとは

フォーム入力バインディング(v-model)は双方向バインディングを実現するために使用するディレクティブです。公式サイトを読むとわかるのですが、v-modelは以下のプログラムを

を省略して

と書いているだけです。私のような初心者の方にはv-bindv-onを使った、1番目のコードが双方向バインディングを実現しているという点に気がつかないと思います。なのでまず1番目のコードを丁寧に解説したいと思います。そうすれば自然とv-modelも理解できると思います。

v-bindとは

v-bindは以下の形で使われます。

v-bind:属性名

今回はvalueがバインドされています。例えば以下のようにsrcをバインドした場合は

リアルタイムでimageURLの値が属性値として渡されます。リアルタイムで渡されるということはこのimageURLの値を変更、他の画像のURLに変更すると表示される画像も変わります。またv-bindの表記は省略できます。なので以下のように書くことも可能です。

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

v-onとは

イベントハンドリング(v-on)は以下の形で使われます。

v-on:イベント名

v-onはイベントを受け取ることができます。例えばclickイベントを受け取るには

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

v-modelの仕組み

v-bind、v-onの仕組みがわかったのでv-modelの仕組みもわかるはずです。

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

筆者
筆者

初めてだと理解しづらいv-modelも分解すると難しいことはやってないことがわかると思います。最後まで読んでくださりありがとうございました!

エンジニアにおすすめのアイテム

記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。

目の保温マッサージ

エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。

座椅子をゲーミングチェア風に

ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート

気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。

タイトルとURLをコピーしました