[Vue] Vue의 Interpolation(보간법)

 

안녕하세요. 혀코입니다.

이번 시간에는 Vue의 Interpolation (보간법)에 대해서 알아보겠습니다.

 

Vue에서 데이터를 표시할 때 이중 중괄호를 사용합니다.

Vue의 문법 중에서 App이 생성될때 이 이중 중괄호 안의 데이터가 딱 한번 렌더링되고 나서 데이터의 변함이 없게 하는 것을 Interpolation (보간법)이라 합니다.

 

다음 코드를 보면, Hello World 문자열을 클릭할 때마다, 느낌표가 뒤에 더해서 출력이 됩니다.

<template>
  <h1 @click="add">{{ msg }}, friend</h1>
</template>

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

 

이 코드에서 h1에 v-once directive를 추가해 주면, 처음 렌더링 후에 클릭을 해줘도 느낌표가 추가되지 않는 것을 확인하실 수 있습니다.

 

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

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

 

 

 

이렇게 Vue의 Interpolation (보간법)에 대해서 알아봤습니다.

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)