[Vue] 템플릿 문법 (문자열, 원시 HTML, 속성)

⚠️ 이 포스팅은 Vue3(한국어): 템플릿 문법을 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. 보간법(Interpolation)
   1. 문자열
   2. 원시 HTML
   3. 속성

 

---

 

보간법(Interpolation)

문자열

Vue에서 데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation)이다. Vue에서 데이터를 화면에 표시해주기 위해서는 script에 정의한 데이터를 template에서 이중중괄호 {{  }} 안에 사용해야 한다. 바인딩된 데이터는 해당 데이터가 업데이트 될때마다 화면에 갱신된다.

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world',
    };
  }
</script>

 

만약 데이터가 업데이트되어도 화면상에 표시해주고 싶지 않다면 v-once 디렉티브를 해당 데이터를 사용하고 있는 요소에 넣어주면된다. v-once가 있는 요소의 데이터는 초기의 데이터만 화면에 표시해준다. 아래의 예제는 h1 태그가 클릭되었을때 msg라는 데이터에 !가 추가된다. 하지만 데이터를 바인딩하고 있는 요소가 v-once라는 디렉티브를 가지고 있으므로 msg 데이터의 초기값인 Hello World가 표시되며 클릭을해도 그 값이 유지된다.

<template>
  <!-- v-once: 데이터를 초기에 한번만 렌더링해주는 디렉티브 (데이터가 업데이트되어도 변하지 않는다) -->
  <h1 v-once @click="add">{{ msg }}</h1>
</template>

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

 

원시 HTML

Vue 컴포넌트에서 만든 데이터를 바인딩하기 위해 이중 중괄호 안에 해당 데이터를 넣어주었다. 데이터가 만약 문자열이 아닌 HTML이라면 이중중괄호 안에 넣는 것이 아닌 v-html 디렉티브 안에 넣어주어야 HTML 형태로 화면에 출력된다. 이중 중괄호 안에 HTML 형태의 데이터를 넣어준다면 화면에 해당 코드가 문자열로 출력된다.

• 이중 중괄호: 데이터를 HTML이 아닌 일반 텍스트로 해석
• v-html 디렉티브: 원시 HTML을 변환해 화면에 출력

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

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

화면에 출력된 모습

 

속성

HTML 속성(id, class, type, href 등)에 데이터를 사용하고 싶다면 이중중괄호로 데이터를 바인딩하는 것이 아닌 v-bind 디렉티브를 사용해야한다. 아래의 예제에서는 class의 속성값으로 데이터를 사용하기 위해 v-bind 디렉티브를 사용하였다.

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

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

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

 

새로 배운 디렉티브 정리

• v-once: 데이터를 초기에 한번만 렌더링해주는 디렉티브 (데이터가 업데이트되어도 변하지 않는다)
• v-html="데이터": 원시 HTML을 변환해 화면에 출력해주는 디렉티브
• v-bind:속성이름="속성값": HTML 속성(id, class, type, href 등)에 데이터를 바인딩할 때 사용하는 디렉티브