Vue 템플릿 문법

템플릿 문법

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용합니다.

보간법

문자열

데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보간입니다.

<span>메시지: </span>

Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체 됩니다. 또한 데이터 객체의 msg 속성이 변경될 때 마다 갱신됩니다.

원시 HTML

이중 중괄호(mustaches)는 HTML이 아닌 일반 텍스트로 데이터를 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 합니다.

즉 데이터 객체의 값이 html 태그일 경우 그것을 출력해서 결과로 보여주려면 v-html을 사용해야지 이중 중괄호(mustaches)를 사용하면 안된다.

속성

Mustaches는 HTML 속성에서 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용하세요:

Javascript 표현식 사용

지금까지 템플릿의 간단한 속성 키에만 바인딩했습니다. 그러나 실제로 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다.

<!-- 가능 -->

<!-- 가능 -->

<!-- 가능 -->


<div v-bind:id="'list-' + id"></div>

디렉티브

디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (나중에 설명할 v-for는 예외입니다.) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것 입니다. 아래 예제에서 살펴보겠습니다.

<p v-if="seen">이제 나를 볼 수 있어요</p>

여기서, v-if 디렉티브는 seen 표현의 진실성에 기반하여 <p> 엘리먼트를 제거 또는 삽입합니다.

전달인자

일부 디렉티브는 콜론(:)으로 표시되는 “전달인자”를 사용할 수 있습니다. 예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용됩니다.

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

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

수식어

수식어는 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. 예를 들어, .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에게 알려줍니다. preventDefault() 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다. … a태그를 클릭 했을 때 preventDefault() 메서드를 실행시켜 주면 페이지 이동을 하는 기본 기능을 막는 것 입니다.

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

약어

약어는 아직 Vue.js쪼렙이기 떄문에 나중에 배우도록 하자