Vue 템플릿 문법

Vue템플릿 문법은 Vue로 화면을 조작하는 방법을 의미한다

 

크게 데이터 바인딩과 디렉티브가 존재한다

 

데이터 바인딩 : Vue인스턴스에서 정의한 속성들을 리액트, Next.js에선 흔히 { } 하나만 넣어 데이터를 바인딩하지만, Vue에선 {{ }} 두 개가 쓰인다

 

<h1>{ title }</h1> // React

<h1>{{ title }}</h1> // Vue.js

 

---

 

디렉티브 :  화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있음

 

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

 

추가로, v-model, v-for, v-bind같은 요소들이 Vue의 디렉티브에 해당된다