[Vue.js 시작하기] 템플릿 문법

뷰의 템플릿 문법 : 뷰로 화면을 조작하는 방법을 의미

데이터 바인딩

콧수염 괄호 (Mustache Tag)

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

<script>
	new Vue({
		data: {
			message: 'Hello Vue.jd'
		}
	}); 
</script>

 

디렉티브

뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법

v-if: data boolean 값이 true면 화면에 영역을 표시할 수 있다. 

v-for: 데이터 속성의 개수만큼 화면에 요소를 반복하여 출력할 수 있다. 목록을 표시해야 할 때, 유용하게 사용할 수 있는 기능

이외에도 자주 사용되는 디렉티브

v-bind

v-on

v-model

 

computed : data가 바뀌면 값이 바뀌는 값을 정의

watch : data가 바뀌면 실행되는 함수

웬만하면 computed로 해결하는 것이 좋다.