《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を使って以下のように書くのが好ましいでしょう。

番外編:働くエンジニアにおすすめアイテム3撰

記事の内容とは別に、日々エンジニアの業務を行う上で役に立っているアイテムを紹介します。どれも実際に使って良いと思ったものだけ紹介していますのでその点はご安心ください。

目の保温マッサージ

毎日使っている目の保温マッサージ機です。使うと翌日の疲労感が全く違います。1日中PCと睨めっこの人は今すぐ購入することを強くお勧めします。

座っている時の負担を減らす

このサポート座布団を購入してからデスクワークの疲労が激減しました。価格も安く購入しやすいのでコスパ最強です。現在職場でも愛用しています。

自宅での作業効率をあげる椅子

ゲーミングチェアを購入して、自宅での作業効率が最大化しました。座った途端集中モードに入ります。家で作業する人は絶対に買っておきたいアイテムです。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方はエンジニアとして最低限知らないとまずい知識ですのでどこかで購入し、読むことをお勧めします。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございます。また技術、経済、株式投資などのことを Twitter でも呟いていますので良かったらフォローよろしくお願いします。

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