tomoyaki BLOG

いちSEの学習記録

第4章 データとイベントのディレクティブ『Vue3 フロントエンド開発の教科書』を読む(4/n)

前回の続き。

データバインディングのディレクティブ

  • テンプレートブロックで記述する v- で始まる属性のこと

v-bind

  • タグの属性部分に対してテンプレート変数を利用するためのもの。
  • 以下のように利用する。
<script setup lang="ts">
import { ref } from 'vue'

const url = ref('https://vuejs.org/')
</script>

<template>
  <p><a v-bind:href="url" target="_blank">Vue.jsのサイト</a></p>
  <p><a :href="url" target="_blank">Vue.jsのサイト(省略形)</a></p>
  <p><a v-bind:href="url + 'guide/introduction.html'" target="_blank">Vue.jsのガイドページ(変数文字列結合)</a></p>
</template>

<style scoped></style>
  • v-bind:xx=”yy”
    • 要素のxx属性の値として、テンプレート変数yyの値を設定する
    • v-bind を省略して:以降のみとする記法もあるが、ソースコードの可読性の観点からおすすめされないらしい。
    • yy の値の部分に式(例:文字列結合)を含めることもできる
  • Boolean指定も可能
<script setup lang="ts">
import { ref } from 'vue'

const isSendButtonDisabled = ref(true)
</script>

<template>
  <p><button type="button" v-bind:disabled="isSendButtonDisabled">送信</button></p>
</template>

<style scoped></style>
  • v-bindの引数として指定する属性名をテンプレート変数とする場合は、属性の部分をブラケットで囲む
<script setup lang="ts">
import { ref } from 'vue'

const widthOrHeight = ref('height')
const widthOrHeightValue = ref(100)
</script>

<template>
  <p><img src="./assets/logo.svg" alt="VueLogo" v-bind:[widthOrHeight]="widthOrHeightValue" /></p>
</template>

<style scoped></style>
  • 複数の属性にまとめてバインドする
    • v-bindの引数として指定する属性名を指定せず、複数プロパティを指定することができる
<script setup lang="ts">
import { ref } from 'vue'

const imgAttributes = ref({
  src: '/images/logo.svg',
  alt: 'Vueのロゴ',
  width: 75,
  height: 75
})
</script>

<template>
  <p><img v-bind="imgAttributes" /></p>
  <p><img v-bind="imgAttributes" title="ロゴです!" /></p>
  <p><img v-bind="imgAttributes" alt="ロゴです!" /></p>
</template>

<style scoped></style>

データバインディングまとめ

  • v-bindはタグの属性に対してテンプレート変数を利用するためのもの。
  • v-bindの省略形について、可読性の観点から本書ではおすすめしていない。
  • 通常のタグ属性との共存、複数の属性のバインド等が可能。

全体的にスムーズに理解できた。v-bindの指定の方法によって細かな挙動が変わってくるが、このあたりは特に覚える必要もない。都度調べればよい。

イベントのディレクティブ

v-on

  • v-on:イベント名="イベント発生時に実行するメソッド名"
  • ボタンクリックイベントの処理=イベントハンドラメソッドに引数を渡すことができる
<script setup lang="ts">
import {ref} from "vue";

const pMsg = ref("イベント前(ここをクリック!)");
const pBgColorEvent = ref("white");
const onPClickWithEvent = (bgColor: string, event: MouseEvent): void => {
    pBgColorEvent.value = bgColor;
    pMsg.value = event.timeStamp.toString();
};
</script>

<template>
    <p v-on:click="onPClickWithEvent('green', $event)" v-bind:style="{backgroundColor: pBgColorEvent}">
        {{pMsg}}
    </p>
</template>
  • v-onの修飾子
    • stop, capture, self…
  • クリックイベントとキーイベントの修飾子
    • enter, tab, delete…

イベントディレクティブのまとめ

イベントディレクティブについては概ね理解できたが、v-onの修飾子に関していまいちピンとこなかった。利用する場面がきたら思い出せるようにしておきたい。