[Vue.js] 템플릿 문법

OROSY·2021년 4월 28일

TIL frontend template syntax vue.js

Vue.js

목록 보기

8/30

템플릿 문법

이번에는 Vue.js의 템플릿 문법에 대하여 살펴봅시다.
Vue.js의 공식 문서 중 템플릿 문법 챕터에 더욱 자세한 내용이 있으니 참고 바랍니다.

1. 보간법(Interpolation)

1.1 문자열

데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문) 기법을 사용한 문자열 보간법(text interpolation)입니다.

<span>메시지: {{ msg }}</span>

Mustache 태그는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체됩니다. 또한 msg 속성이 변경될 때 마다 갱신됩니다. 이전 글에 중요하게 설명드렸던 반응성의 개념이 적용된다는 의미입니다.

1.2 v-once

v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있습니다. 다만, 이런 경우 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다.

<span v-once>결코 변하지 않을 것입니다: {{ msg }}</span>

1.3 코드 예시

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

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

Hello world! 를 클릭할 때마다 느낌표가 추가되는 화면을 구현하였습니다. v-once를 추가하여 화면에 렌더링을 한 이후에는 데이터가 변경이 되더라도 화면을 갱신하지 않는 디렉티브를 명시하였습니다. 즉, 반응성을 가지지 않게 되었습니다.

2. 원시 HTML

이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 합니다.

<p>이중 중괄호 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

3. 속성

3.1 v-bind

Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용해야 합니다.

<div v-bind:id="dynamicId"></div>

3.2 v-bind 약어

v-bind는 약어를 사용하여 생략하고 : 콜론 기호만 기재할 수 있습니다.

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

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

3.3 코드 예시

<template>
  <h1 v-bind:class="msg"> // :class도 가능(약어)
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active'
    }
  }
}
</script>

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

화면에 구현한 active라는 글자에 v-bind 디렉티브를 사용하여 class를 지정하여 style 속성이 적용되도록 하였습니다. 물론, 이를 생략하고 약어인 :만 사용하여도 됩니다.

3.4 동적 전달 인자

JavaScript 표현식을 대괄호로 묶어 디렉티브 전달인자로 사용할 수도 있습니다.

<template>
  <h1
    :[attr]="msg"    // [attr] 동적 전달인자
    @[event]="add">  // [event] 동적 전달인자
    {{ msg }}
  </h1>
</template>

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