Template Syntax
Vue의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다. 크게 보면 data binding과 directive로 구성됩니다.
Data Binding
데이터 바인딩은 Vue 인스턴스의 data()에 정의한 속성들을 화면에 표시하는 방법입니다. 화면에 이런 state를 보여줄 때는 v-text와 머스테치({{}})를 사용합니다.
<div>{{message}}</div>
new Vue({
data() {
return {
message: "Hello Vue World"
};
};
})div 태그에 머스테치를 활용하여 데이터 바인딩을 할 수 있습니다.
Directive
디렉티브는 Vue로 화면의 요소를 쉽게 조작하기 위한 문법입니다. 대표적으로 v-if와 v-for가 있습니다.
<div>
<p v-if="if-p">이것은 보일까요?</p>
<ul>
<li v-for="(item, idx) in lists" :key="idx">이것은 몇번 반복될까요?</li>
</ul>
</div>이외에도 자주 사용되는 디렉티브는 v-bind, v-on, v-model등이 있습니다.
🎢