今回の記事は、
- これからVue.jsを始めてみたい
- v-modelの使い方が知りたい
- 双方向バインディングを使ってみたい
という方に向けた記事になっています。
なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。
今回の記事は、 最近よく聞くけど、Vue.jsってなに？これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]
【Vue.js】v-modelディレクティブとは？
v-modelディレクティブは、主にformのinput / textarea などの要素に使用され、View側（HTML）とModel側（Vue.js）との間でデータの双方向バインディングを実現する仕組みになります。
ここで出てきた「双方向バインディング」というのは、View側とModel側とで常にデータを繋ぎ続ける（バインドし続ける）ということであり、具体的に申し上げると、「HTML上で変更したデータがVue.js側にも反映され、逆に何かしらのアクションでVue.js側のデータが変更された場合にはその変更がHTML側にも反映される」ということです。
このv-modelディレクティブを使用することで、フォームに入力された値を瞬時に取得することができ、これまでの素のJavascriptやjQueryでのやり方と比べて格段に効率が上がっています。
基本的な使い方は以下の通り、Vueオブジェクトのdataプロパティに登録したキーをそのままv-modelに設定してあげるだけでOKです。
基本的な使い方
<input v-model="test">
<script>
let app = new Vue({
el: "#app",
data: {
test: ""
}
})
</script>
v-modelを使って双方向バインディングを体験してみましょう
基本的な使い方を知って頂いたところで、続いては実際のコードを見ながらその挙動を確認していきましょう。
まずはその挙動を知っていただくという意味で、シンプルにinput要素のみを用意し、その値がすぐさま画面上に表示されるような機能を実装していきます。
実装コード
<div id="app1">
<input v-model="input1">
<p v-show="input1">現在の入力値は{{ input1 }}です。</p>
</div>
<script>
let app1 = new Vue({
el: "#app1",
data: {
input1: ""
}
})
</script>動作確認用
現在の入力値は{{ input1 }}です。
上記のフォームに入力して頂くと、その入力値が即座に画面上に表示されているのがご確認いただけたかと思います。
素のJavascriptやjQueryでは自らDOMを直接操作する必要がありましたが、Vue.jsだとこれだけで実現できるのですから、驚きですよね。
v-modelディレクティブに修飾子を追加してみましょう
この便利なv-modelディレクティブですが、修飾子を追加することでさらに便利に利用することができます。
主な修飾子としては以下の3種類が用意されています。
| 1. .lazy | inputイベントの代わりにchangeイベントの後に同期するよう設定 |
|---|---|
| 2. .number | 入力値を自動的にNumberに変換 |
| 3. .trim | 入力値から前後の空白を自動的に取り除く |
上記の3つのうち、今回は.trim修飾子を使ってみます。
実装コード
<div id="app2">
<input v-model.trim="input2">
<p v-show="input2">現在の入力値は{{ input2 }}です。</p>
</div>
<script>
let app2 = new Vue({
el: "#app2",
data: {
input2: ""
}
})
</script>動作確認用
現在の入力値は{{ input2 }}です。
上記のフォームを試して頂くと、入力値の前後に挿入された空白のみ綺麗に除去されているのがご確認いただけたかと思います。
不要な空白のせいで変なデータが登録されてしまうこともありますので、このtrim修飾子も積極的に使っていきましょうね。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌？
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう？【現役エンジニアが徹底解説します】
MidWorks（ミッドワークス）の評判ってどう？【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまでVue.jsのv-modelディレクティブの使い方についてご紹介してきましたがいかがでしたか？
「双方向バインディング」をはじめとして、聴き慣れない言葉だらけで最初は混乱されるかもしれませんが、実態を知って頂くと、その利便性に驚かれた方も少なくないのではないでしょうか？
このv-modelディレクティブは、Vue.jsでWebアプリを作成する際に避けて通れない道と言っても過言ではないため、ぜひこの機会にマスターしておいてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
