보간법(Interpolation)

v-once

• 데이터가 변경되어도 갱신되지 않는 일회성 보간 수행 가능

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

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

<style>

</style>

원시 HTML

• 실제 HTML을 출력하려면 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>

<style>

</style>

v-bind

• 저장버튼 누르면 v-bind가 사라지고 :class="msg"만 남는다. (원래는 v-bind:class="msg")

<template>
  <h1 :class="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active'
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

<style scoped>
  .active {
    color: royalblue;
    font-size: 100px;
  }
</style>

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<template>
  <h1 :[attr]="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active',
      attr: 'class',
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

<style scoped>
  .active {
    color: royalblue;
    font-size: 100px;
  }
</style>

attr은 html의 속성을 가르키는 attribute의 약어
[attr]을 사용하여 속성의 이름을 대체해서 사용 가능

v-on

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a @[event]="doSomething"> ... </a>

@로 대체 가능!

<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>

v-bind와 동일하게 대체해서 사용가능