// v-once : 데이터를 단 한번만 렌더링을 하고 후에 데이터가 갱신되어도 화면에 반영되지 않는다.
// v-html : 실제 html 문법으로 동작하게 한다.

<template>
  <h1 
    v-once
    @click="add">
    {{ msg }}
  </h1>
  <h1 v-html="msg"></h1>
</template>

<script>
export default {
  data() {
    return {
      msg: '<div style="color: red;">Hello!</div>'
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

// Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용하세요.
// <h1 :class="msg"> : v-bind의 약어 처리 된 것이다.
// [attr] : class 로 해석되어서 html 의 class 속성으로 처리된다.
// "'active'" : active 라는 문자열로 인식한다.

<template>
  <h1
    :[attr]="'active'"
    @[event]="add">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active',
      attr: 'class',
      event: 'click',
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>
<style scoped>
  .active {
    color:royalblue;
    font-size: 100px;
  }
</style>