뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.
데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)
<div>{{ message }}</div>
new Vue({
data: {
message: 'Hello Vue.js'
}
})
div 태그에 콧수염 괄호를 이용해 뷰 인스턴스의 message 속성을 연결했다. 코드를 실행하면 화면에 Hello Vue.js라는 문자열이 출력된다.
디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다. v- 로 시작하는 속성들이 해당한다.
<div>
Hello <span v-if="show">Vue.js</span>
</div>
new Vue({
data: {
show: false
}
})
위 코드는 show 라는 데이터 속성 값에 따라 Vue.js 텍스트가 출력되거나 되지 않는 코드이다.
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
new Vue({
data: {
items: ['shirts', 'jeans', 'hats']
}
})
v-for 디렉티브를 활용하면 데이터 속성의 개수만큼 화면의 요소를 반복하여 출력할 수 있다. 목록을 표시해야할 때 유용하게 사용할 수 있는 기능이다.
이외에도 자주 사용되는 디렉티브는 다음과 같다.
<aside> ✏️ 데이터를 화면에 표시해주기 위한 데이터 바인딩, 화면을 쉽게 조작하기 위해 자주 쓰는 기능 등을 미리 정의해둔 디렉티브
</aside>