[VUE] 템플릿 문법

Web/vue

아랄라랄라 2019. 2. 12. 15:23

템플릿 문법

보간법^[각주:1](Interpolation)

#문자열

데이터 바인딩의 가장 기본 형태는 "mustache"구문(이중 중괄호.. 수염 닮아서?)을 사용한 텍스트 보간이다.

v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행 할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 한다.

#원시 HTML

{{}}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다.

#속성

{{}}는 HTML 속성(인라인)에서 사용할 수 없다. 쓰고 싶으면 v-bind 디렉티브를 사용.

#JavaScript 표현식 사용

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

한가지 제한사항은 각 바인딩에 하나의 단일 표현식 만 포함될 수 있다.

템플릿 표현식은 샌드박스 처리되며 Math와 Date같은 전역으로 사용 가능한 것에만 접근 가능하다.

사용자 정의 전역 X

디렉티브

디렉티브는 v- 접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 JavaScript 표현식이 된다.(v-for는 제외)

디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것이다.

#전달인자

v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용된다.

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

여기서 href는 전달인자로, 엘리먼트의 href 속성을 표현식 url의 값에 바인드하는 v-bind 디렉티브에 알려준다.

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

전달인자는 이벤트를 받을 이름이다.

#수식어

점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법을 바인딩 해야 함을 나타낸다.

<form v-on:submit.prevent="onSubmit"> ... </form>

.prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에 알려준다.

약어

v- 접두사는 템플릿의 Vue 특정 속성을 식별하기 위한 시각적인 신호 역할을 하지만, 일부 자주 사용되는 디렉티브에서 너무 길게 느껴질 수도 있다. 이때 약어로 표현할 수 있다. 처음엔 어색하지만 쓰다보면 익숙해 질 것이다.

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

참고)

-https://kr.vuejs.org/v2/guide/syntax.html

-https://beomy.tistory.com/48

728x90