[Vue.js] 템플릿문법

보간법

문자열

• 데이터 바인딩의 가장 기본 형태는 "Mustache"구문(이중 중괄호)을 사용한 텍스트 보간. => {{ 속성명 }}
• v-once 디렉티브를 사용하여 데이터 변경 시 업데이트되지 않는 일회성 보간을 수행

원시 HTML

• 이중 중괄호(mustaches)는 html이 아닌 일반 텍스트로 데이터를 해석 => musaches는 v-text와 같음
• 실제 html을 출력하려면 v-html 디렉티브를 사용

JavaScript표현식 사용

• Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
• 각 바인딩에 하나의 단일 표현식만 포함될 수 있음 => {{ var a == 1 }} (X) , {{ if (ok) {return msg} }} (X)

디렉티브 (Directives)

• 디렉티브는 v-접두사가 있는 특수 속성
• 디렉티브 속성 값은 단일 JavaScript 표현식이 됨 (v-for는 예외)
• 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

 

• v-model : 양방향 바인딩 처리를 위해서 사용 (form의 input, textarea)
• v-bind : 엘리먼트의 속성과 바인딩 처리를 위해서 사용. 약어로 ":"로 사용 가능
• v-show : 조건에 따라 엘리먼트를 화면에 렌더링. style의 display속성을 변경
• v-if, v-else-id, v-else : 조건에 따라 엘리먼트를 화면에 렌더링
• v-for : 배열이나 객체의 반복에 사용. v-for="요소 변수 이름 in 배열", v-for="(요소 변수 이름, 인덱스) in 배열"
• template : 여러 개의 태그들을 묶어서 처리해야 할 경우에 사용. v-if, v-for, component등과 함께 많이 사용
• v-cloak : Vue Instance가 준비될 때까지 mustache바인딩을 숨기는 데 사용. display:none과 같은 css 규칙과 함께 사용. Vue Instance가 준비되면 v-cloak은 제거됨.

Vue method

Vue Instance는 생성과 관련된 data 및 method의 정의 가능

method안에서 data를 "this. 데이터 이름"으로 접근 가능

약어

가장 자주 사용되는 두개의 디렉티브인 v-bind 와 v-on에 대해 약어를 제공한다

<a v-bind:href="url> => <a :href="url">

<a v-on:click="doSomething"> => <a @click="doSomething">