Vue.js 강좌 2. 템플릿 문법

Vue 템플릿이란 화면에 어떻게 렌더링될 것인지를 정의한 코드이다. Vue 템플릿은 HTML과 문법적으로 똑같다. 따라서 HTML 파서가 Vue 템플릿을 파싱할 수 있다. 하지만 Vue에서만 인식할 수 있는 몇가지 템플릿 문법이 있다. 이것을 간단히 알기쉽게 정리해본다.

 

 

 

문자열 보간 (Text Interpolation)

 

<div>Name: {{ name }}</div>

 

HTML 문자열에 vue 인스턴스의 데이터를 바인딩하는 방법이다. {{ 와 }} 사이에는 인스턴스의 name 이라는 속성의 값으로 대체된다.

가장 기본적인 데이터 바인딩 방식이다.

 

예제코드

<template>
  <div>Name: {{ name }}</div>
</template>

<script>
export default {
  data () {
    return {
      name: 'AnalogCoder'
    }
  }
}
</script>

 

 

 

Raw HTML

 

{{ 와 }} 를 사용한 텍스트 보간법은 데이터를 일반 텍스트로 취급하여 실제 HTML 문자열은 넣을수가 없다. 이를 위해서는

v-html을 사용하여야 한다. 하지만 XSS 취약성 때문에 안전한 곳에서만 사용하도록 해야 한다.

 

예제코드

<template>
  <div>Name: <span v-html="name" /></div>
</template>

<script>
export default {
  data () {
    return {
      name: '<span style="color: red">AnalogCoder</span>'
    }
  }
}
</script>

 

 

 

자바스크립트 표현식 (Javascript Expression)

 

텍스트 보간법에 단순 키값이 아닌 자바스크립트 표현식이 들어갈 수 있다. 표현식이란 구문이 평가되어 결과가 나오는 문법을 말한다.

아래와 같이 텍스트 보간법 {{ 와  }} 사이에 자바스크립트에서 사용 가능한 표현식을 넣으면 그 결과가 출력된다.

 

<div>{{ count + 1 }}</div>
<div>{{ result ? 'SUCCESS' : 'FAIL' }}</div>
<div>{{ data.join('-') }}</div>
<div>{{ getFullName(lastName, familyName) }}</div>

 

 

속성 바인딩 (Attribute Binding)

아마도 Vue에서 가장 많이 사용하는 템플릿 문법일 것이다.

HTML의 속성(attribute)에 데이터를 바인딩하는 역할을 한다.

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

위에 정의된 엘리먼트에서 id 속성값을 userId 값과 싱크를 맞추어준다.

단, 이때 userId 값이 null이거나 undefined 라면 id속성은 제거된다. 

 

v-bind 단축구문

아래와 같이 :만 사용하여 v-bind:id 를 :id로 줄일 수 있다. 대부분 이렇게 단축구문으로 사용한다.

<div :id="userId"></div>

 

 

 

지시어 (Directives)

Directive는 v- 로 시작하는 특별한 속성으로 Vue의 기능을 활용할 수 있도록 도와준다. Vue에서 미리 정의된 지시어들이 존재한다. 위에서 봤던 v-bind, v-html도 지시어중의 하나이다. Vue의 지시어는 아래와 같은 것들이 존재한다.

v-bind	데이터를 바인딩하는 지시어
v-html	HTML 코드를 렌더링하는 지시어
v-for	반복 렌더링을 수행하는 지시어
v-if / v-else / v-else-if	조건부 렌더링을 수행하는 지시어
v-on	이벤트 처리를 수행하는 지시어
v-model	양방향 데이터 바인딩을 수행하는 지시어
v-slot	자식컴포넌트에게 데이터나 로직을 전달할때 사용하는 지시어
v-pre	해당 엘리먼트의 텍스트 내용을 파싱하지 않도록 하는 지시어
v-once	해당 엘리먼트를 한번만 렌더링 하도록 하는 지시어
v-text	엘리먼트의 텍스트 콘텐츠를 렌더링하는 지시어. 위에서 설명한 텍스트 보간법과 동일한 결과이다.
v-cloak	인스턴스가 로드되기 전에 발생하는 깜빡임을 방지하는 지시어

 

 

전달인자 (Arguments)

v-bind와 v-on과 같은 지시어는 전달인자를 가질 수 있다.

<div v-bind:name="userName"></div>
<div v-on:click="login"></div>

 

위코드에서 name , click은 모두 인자(arguments)이다.

 

 

동적 전달인자(Dynamic Arguments)

인자의 이름을 동적으로 만들어지도록 할 수 있다.

<div v-bind:[attrName]="attrValue"></div>
<div v-on:[eventName]="eventAction"></div>

인스턴스의 attrName와 attrValue 속성을 이용하여 동적으로 v-bind의 속성과 값을 바인딩시킬수가 있으며, 인스턴스의 eventName, eventAction 속성을 이용하여 동적으로 v-on 의 이벤트 속성과 처리기를 바인딩 시킬수 있다.

 

 

 

마무리하며

Vue 인스턴스를 어떻게 렌더링할지를 정의하는 것이 Vue 템플릿이다. 그리고 Vue 템플릿은 HTML 문법 + 템플릿 문법을 통해 정의한다. HTML 문법은 잘 알고 있으므로 템플릿 문법을 알아야 Vue 템플릿을 정의하여 Vue 인스턴스를 만들고 Vue 어플리케이션을 만들 수 있다.

 

Vue의 템플릿 문법은 Vue를 시작하면 기본적으로 알아야될 필수사항중에 하나이므로 꼭 알고 넘어가자.가장 많이 사용하는 문자열 보간법과 v-bind를 이용한 속성 바인딩은 필수 기초라고 할 수 있다.

 

추후의 강좌를 통해 각각의 지시어에 대해 더 자세히 설명할 예정이다.

 

 

 

지난 강좌

Vue.js 강좌 1. Vue를 제대로 이해하면서 시작하자

Vue.js 강좌 1. Vue를 제대로 이해하면서 시작하자

Vue Progressive Framework

Vue Progressive Framework

Vue 시작하기전 알아야할 핵심 특징 - 컴포넌트, 선언적렌더링, 반응성

Vue 시작하기전 알아야할 핵심 특징 - 컴포넌트, 선언적렌더링, 반응성