vue3 syntax

//onClick
@click="펑션명"

//조건문
v-if

//마운트된 이후로 데이터가 변하지 않음
v-once 

//원시 html
v-html="msg"

//v-bind
msg : 'active'
v-bind:id=""      ->> :id
v-bind:class=""  ->> :class

 

<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>
  .active{
    color:violet;
    font-size:100px;
  }
</style>