kazuki.m

Appearance

sumnail

Vue3のバインディング

created at : 2024/08/09

Vue3

Vue のバインディングとは？ ​

Vue.js では HTML 要素の属性に JavaScript のデータをバインド（紐付け）することができます。

バインディングによって、データの変更を検知し自動的にビューを更新したり、ユーザー入力を検知しデータに反映することが出来ます。

属性バインディング ​

v-bindディレクティブを使うと、動的に HTML 要素の属性にデータをバインドすることができます。

v-bindは省略して:を使うこともできます。

例えば、v-bind を使って style 属性に{ color : rgb(r,g,b)}をバインドすると、データ(r,g,b)の変更に応じてテキストの色が変わります。

v-bind の使い方

Dynamic Styling

ソースコードを見る
vue
<template>
  <h1 :style="{color : `rgb(${r}, ${g}, ${b})`}">Dynamic Styling</h1>
  <button @click="onClick">Generate Random Color</button>
</template>
vue
<script setup lang="ts">
import { ref } from 'vue'

const r = ref("0");
const g = ref("0");
const b = ref("0");

const onClick = () => {
  r.value = (Math.random() * 255).toFixed();
  g.value = (Math.random() * 255).toFixed();
  b.value = (Math.random() * 255).toFixed();
}
</script>
vue
<style scoped>
button {
  padding: 10px;
  margin: 10px;
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
  border-radius: 4px;
}

button:hover {
  border: 1px solid var(--main-hover-color);
  background-color: var(--main-hover-color);
}
</style>

ボタンを押すごとにランダムに r,g,b の値が変わるので、style にバインドしていた color が動的に変わるため、テキストの色が変わります。

双方向バインディング ​

v-modelを使うと、フォームの入力値などユーザーの操作を Vue インスタンスのデータと双方向にバインディングすることができます。

v-model の使い方

Input word :

ソースコードを見る
vue
<template>
  <input
    type="text"
    v-model="message"
    placeholder="Edit me"
  />
  <p>Input word : {{ message }}</p>
</template>
vue
<script setup lang="ts">
import { ref } from 'vue'

const message = ref('')
</script>

テキストフィールドに入力した値がmessageに反映され、messageの値が変更されると下のメッセージの表示にも反映され双方向にバインディングされることが確認できます。

まとめ ​

Vue3 の基本的な binding について確認できました。

データと DOM 要素をバインドすることで、データの変更を検知し自動的にビューを更新したり、ユーザー入力を検知しデータに反映することを確認しました。

参考 ​