Vue.js 템플릿 문법

뷰의 템플릿 문법

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다.
템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉩니다.

데이터 바인딩

데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은
콧수염 괄호 (Mustache Tag)입니다. = {{}}

<div>{{ message }}</div>

new Vue ({
	data: {
    	message : 'Hello Vue.js'
    }
})

디렉티브

디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다. 예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있습니다.

뷰에서 v-라고 붙는아이들을 전부 뷰 디렉티브라고 부른다.

<div>
	hello <span v-if="show">Vue.js</span>
</div>

new Vue({
	data: {
    	show: false
    }
})