[Vue] 뷰의 템플릿 문법

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다.

템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.

 

데이터 바인딩

뷰 인스턴스에 정의한 속성들을 화면에 표시하는 방법

<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
    }
})