双方向バインディングとは
「変数」と「画面（入力欄）」がお互いに同期する仕組みのこと。
一方を変更するともう一方も自動で更新される仕組み。
vueでよく使う
v-bindとv-onを今回組み合わせた例で見てみます。
まずはv-bindの処理から見ていきます
例えばjavascriptの
const text = ref("まぐろ")
というものがあり、vueのコードの
// textの値を入力欄に表示
<input :value="text">
なら
入力欄
-------
まぐろ
-------
になります。
もちろんこの状態で入力欄を「"ぶり"」に変えたところで
textの値は変わらないです。
次にv-onを見ていきます
// 入力されたらonInputを実行
// onInputは入力欄の内容が1文字でも書き換わった瞬間に、即座に発生するイベント
<input @input="onInput">
この二つを組み合わせるととても便利になる
# 書くとこんな感じ
<input
:value="text"
@input="onInput"
>
そうすることで、
①v-bind部分 textを画面に表示（この時点では「まぐろ」と出ている）
②ユーザーが「かつお」と入力
③v-on部分 onInputが動く
④text が更新される(「まぐろ」としていた部分が「かつお」に置き換わる)
といった流れになります。
でも毎回書くのはめんどくさい、、、そこでv-model
なんとこの
<input
:value="text"
@input="onInput"
>
v-modelだと
// 入力欄と変数を自動で同期してくれる
<input v-model="text">
この１行だけでOKなんです。
とても便利ですし、可読性にも優れます。
| ディレクティブ | データの流れ | バインディング | 役割 |
|---|---|---|---|
v-bind (:) |
text → 入力欄 | 一方向 | 変数の値を画面（入力欄）に表示 |
v-on (@) |
入力欄 → text | 一方向 | ユーザーの入力を受け取り、変数を更新 |
v-model |
text ↔ 入力欄 | 双方向 | 変数と入力欄を自動で同期 |
比較すると一目瞭然
// 通常通りv-on v-bindを組み合わせた場合
<script setup>
import { ref } from 'vue'
const text = ref('まぐろ')
function onInput(e) {
text.value = e.target.value
}
</script>
<template>
<input :value="text" @input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</template>
// v-modelを用いた場合
<script setup>
import { ref } from 'vue'
const text = ref('まぐろ')
</script>
<template>
<input v-model="text" placeholder="Type here">
<p>{{ text }}</p>
</template>
通常functionとtemplateに書く必要があるが、v-modelを使用すると
こんなに短く、見やすいシンプルなコードになる
おまけ このような「同じ意味でも短く、書きやすくした書き方」のことを
シンタックスシュガー（糖衣構文）といいます。
おまけのおまけ糖衣って言うのは 苦い薬に砂糖(糖衣)をコーティングすることで飲みやすくなる
そこから苦い薬（面倒なコード）をv-modelのような書きやすい形で包んでくれているといったイメージから糖衣構文と呼ばれるそう
Laravelフレームワークにも似たものが搭載されている
v-model に近いものとしてLaravelに備わっている機能がLivewire
JavaScript不要の動的UI: Livewireは
「JavaScriptをほぼ記述せずに動的なUIを作成できる」フレームワーク
PHPでの双方向バインド: Vue.jsの v-model と同じように、
画面上の入力項目とサーバー側（PHP）の変数を同期させる仕組みを持っている