Template : vue의 템플릿 문법은 화면을 조작하는 방법을 의미합니다.
템플릿 문법은 데이터 바인딩과 디렉티브로 나뉩니다.
Template - 데이터 바인딩
데이터 바인딩 : vue 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다.
다음과 같이 {{ }} 형태로 표시하게 됩니다.
<div>{{ message }}</div>
Template - 디렉티브
디렉티브는 v- 접두사가 있는 특수 속성입니다. vue에서는 view에 데이터를 표현하는 등의 용도로 사용되는 속성입니다.
주요 디렉티브 종류
1. 양방향 데이터 바인딩 : v-model
2. html 속성 바인딩 : v-bind
디렉티브 설명
v-model
view와 model 사이의 양방향 바인딩 처리를 위해서 사용됩니다. 특히, <form> 태그 안의 <input>, <textarea> 등에서 사용됩니다. 모델이 변경되면 입력 요소의 값도 변경되게 됩니다.
<div id="app">
<input type="text" v-model="msg" />
<div>{{msg}}</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
msg: "",
},
});
</script>
다음과 같이 "v-model" 을 통해 양방향 바인딩 처리가 가능해졌습니다.
즉, input 태그에서 입력을 받아 <div> 태그에서 출력하는 것이 가능해졌습니다. 반대로 data의 속성에서 msg를 "Hello Vue!"로 설정해두면 input 태그의 값도 "Hello Vue!"로 설정된 것을 확인할 수 있습니다.
<div id="app">
<input type="text" v-model="msg" />
<div>{{msg}}</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
msg: "Hello Vue~!",
},
});
</script>
v-bind
element의 속성(id, class, style 등)과 바인딩 처리를 위해서 사용됩니다. 약어로 ":"를 사용할 수 있습니다.