Vue.js 문법 - 템플릿 문법

 

템플릿 문법

 

Vue.js는 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석할 수 있는 유효한 HTML입니다.

 

보간법(Interpolation)

 

문자열

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

- Mustache 태그는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체

- msg 속성이 변경될 때 마다 갱신 (반응성)

 

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

 

- v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행

 

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

 

 

<!-- 예제 - App.vue -->

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

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

 

원시 HTML

- 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석

- 실제 HTML을 출력하려면 v-html 디렉티브를 사용

 

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

 

속성

- Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없다

- v-bind 디렉티브를 사용

- v-bind 약어, 콜론(:) 기호

 

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

<!-- 약어 -->
<div :id="dynamicId"></div>

 

동적 전달 인자

- JavaScript 표현식을 대괄호로 묶어 디렉티브 전달인자로 사용

 

<!-- 예제 - App.vue -->

<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: royalblue;
    font-size: 100px;
  }
</style>