Vue에서 사용되는 템플릿 문법에 대해서 알아보자
템플릿 문법
템플릿 블럭에서 사용되는 구문
템플릿은 HTML 덩어리라고 생각하면 될 것 같다.
보간법
이중 중괄호(Mustache 문법)를 사용해 텍스트를 나타내는 방법
DOM에 데이터를 바인딩하는 방법 중 하나
{{ 변수 }}전달인자
일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자를 가질 수 있음
(이벤트나 속성 등이 전달인자로 사용됨)
<a v-bind:href="url"> ... </a>→ 여기서의 전달인자는 href , url의 값을 엘리먼트의 href 속성에 바인딩함
동적 전달인자
javascript 표현식을 대괄호로 묶어 디렉티브 전달인자로 사용할 수 있음
<a v-bind:[attributeName]="url"> ... </a>전달인자를 동적으로 바인딩 함.
만약 attributeName이 url이라면 <a v-bind:href="url">과 동일하게 바인딩 됨.
수식어
.으로 표시되는 접미사
.stop- event.stopPropagation() 메서드를 호출..prevent- event.preventDefault() 메서드를 호출..capture- 이벤트 리스너에 캡쳐모드를 추가..self- 해당 엘리먼트에서 이벤트가 전달된 경우에만 동작..{keyAlias}- 특정 키에 대해서만 동작..once- 한번만 핸들러가 동작..left- 마우스 왼쪽 버튼 이벤트에만 핸들러 동작..right- 마우스 오른쪽 버튼 이벤트에만 핸들러 동작..middle- 마우스 가운데 버튼 이벤트에만 핸들러 동작..passive- { passive: true } 속성을 DOM 이벤트에 추가.
<!-- 다음과 같이 사용 -->
<form v-on:submit.prevent="onSubmit">...</form>약어
자주 사용되는 디렉티브(v-on, v-bind)에서 v- 접두어를 생략하여 더 간편하게 코드를 작성할 수 있음
v-bind는 :로, v-on은 @로 대체됨
<!-- v-bind의 약어 -->
<a :href="url"> ... </a>
<!-- 동적 전달인자와 함께 쓴 약어 -->
<a :[key]="url"> ... </a>
sms
<!-- v-on의 약어 -->
<a @click="doSomething"> ... </a>
<!-- 동적 전달인자와 함께 쓴 약어 -->
<a @[event]="doSomething"> ... </a>참조링크
https://v3.ko.vuejs.org/guide/template-syntax.html
👩💻