Vue - 템플릿 문법

Vue.js 템플릿

Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한

모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유효한 HTML

컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화

가상 DOM 개념에 익숙하고, JavaScript 본래의 기능을 선호한다면, 템플릿 대신 렌더 함수를 직접 작성할 수 있다

보간법

텍스트 보간법

• 데이터 바인딩의 가장 기본적인 형태는 "Mustache"(이중 중괄호) 문법을 사용한 텍스트 보간법
• msg 속성이 변경될 때마다 갱신된다

<span>메세지: {{ msg }}</span>

 

v-once 디렉티브

• 데이터가 변경되어도 갱신되지 않는 일회성 보간 수행

<span v-once>메세지(변하지않음): {{ msg }}</span>

HTML 출력

• 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석 따라서 v-html 디렉티브를 사용해야 한다

v-html 디렉티브

• 실제 HTML을 출력

<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

속성 바인딩

• 이중 중괄호는 HTML 속성(attribute) 내에서 사용할 수 없기 때문에 v-bind 디렉티브를 사용해야 한다

v-bind 디렉티브

 

JavaScript 표현식 사용

Vue는 실제로 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원한다

 

---

디렉티브

• v- 로 시작하는 특수한 속성
• 디렉티브 속성 값은 단일 JavaScript 표현식이어야 하는데 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용한다

인자

일부 디렉티브는 디렉티브 뒤에 콜론(:)으로 표시되는 "인자"를 사용한다

<a v-bind:href="url"> ... </a>
<a v-on:click="doSomething"> ... </a>

동적 인자

• 디렉티브의 인자를 대괄호로 감싸서 JavaScript 표현식으로 사용

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

attributeName

• JavaScript 표현식으로 동적으로 평가, 평가된 값은 인자의 최종 값으로 사용
• ex) attributeName 속성값이 "href"이면 v-bind:href

eventName

• 이벤트 이름을 동적으로 바인딩
• ex) eventName의 값이 "focus"인 경우 v-on:focus

약어

• 가장 자주 사용되는 두 개의 디렉티브 v-bind, v-on에 대한 특별한 약어를 제공

v-bind 약어

• "v-bind:" 를 ":" 축약할 수 있다

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

v-on 약어

• "v-on:click"을 "@"로 축약할 수 있다

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

 

참조 : https://ko.vuejs.org/guide/essentials/template-syntax.html