속성과 이벤트의 동적바인딩 및 디렉티브 사용예제

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
// 1.속성을 동적 바인딩
const objectOfAttrs = {
  id: 'id-selector',
  class: 'class-selector1'
}

// 2.이벤트 동적 바인딩 
const eventName='click'
const eventHandler=function(){alert(1)}

// 3.속성 동적 바인딩
// 4.css 클래스의 디렉티브 사용예제
// 5.v-text의 디렉티브 사용예제
const attrName = 'id'
const classA = 'red-font'

</script>

<template>
  <!-- 1.속성을 동적 바인딩 -->
  <h1 v-bind="objectOfAttrs" >{{ msg }}</h1>
  <input v-model="msg" />

  <!-- 2.이벤트 동적 바인딩 -->
  <button @[eventName].once.middle="eventHandler">동적버튼</button>
  <!-- 
    .once - 이벤트가 한 번만 트리거 됨(일회용처럼).
    .left - 마우스 왼쪽 버튼으로만 이벤트가 트리거 됨.
    .right - 마우스 오른쪽 버튼으로만 이벤트가 트리거 됨.
    .middle - 마우스 중앙(힐 클릭) 버튼으로만 이벤트가 트리거 됨.
   -->

  <!-- 3.속성 동적 바인딩 (기본적으로 :html속성명 으로 사용가능하다. 그 속성명을 동적으로 변경한 예제 ) -->
  <!-- 4.css의 클래스의 디렉티브 사용예제 -->
  <!-- 5.v-text의 디렉티브 사용예제 -->
  <div 
    :[attrName]="'동적으로 속성을 등록합니다'" 
    :class="[classA, { 'class-selector1' : true  }]"
    v-text="'이건 {{ }} 을 사용하는것과 동일합니다 '" 
  />
</template>
<style>
#id-selector{
  color:darkorange;
}
.class-selector1{
 border: 1px darkgreen solid;
}
.red-font{
 color: darkred;
}
</style>