[vue.js] 템플릿

vue에서 template 문법이란 화면을 조작하는 방법.

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

 

데이터 바인딩

데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법.

가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다.

 

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

//script 단
new Vue({
	data: {
    	message: 'Hello Vue.js'
    }
});

위와 같은 방법으로 html에 vue의 데이터를 입력시킬 수 있다.

 

 

디렉티브

디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있다. 

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

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

위와 같은 방식으로, v-if는 참일 경우에만 실행되는 문법이기 때문에 show가 false면 화면에 출력되지 않는다.

혹은

<ul>
	<li v-for="item in items"> {{ item }}</li>
</ul>

new Vue({
	data: {
    		items:['shirts', 'jeans', 'hats']
    	}
});

가장 자주 쓰이는 것 중 목록 나열을 예로 들자면, data의 items 배열안에 들어있는 모든 값들을 v-for문을 사용하여 한 번에 꺼내 list를 만들 수 있다.

 

여기서 {{ item }}은 v-for문 안에서 item 부분과 이름이 같아야 한다.

(물론 in items의 items는 data에 선언된 데이터와 같아야 호출이 된다.)

 

이외에도 v-bind, v-on(click과 많이 쓰임), v-model 등의 디렉티브가 있다.