TIL - Vue 기본 신택스 (Template Syntax)
Vue는 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용한다.
1. Template Syntax 종류
- Text Interpolation
- Raw HTML
- Attribute Bindings
- JavaScript Expressions
2. Template Syntax 상세
2-1. Text Interpolation (텍스트 보간)
- 데이터 바인딩의 가장 기본적인 형태
- 이중 중괄호
{{ }}(콧수염 구문) 사용 - 콧수염 구문은 해당 컴포넌트 인스턴스의
msg속성 값으로 대체되며,msg가 변경될 때마다 업데이트됨
<p>Message: {{ msg }}</p>2-2. Raw HTML
- 콧수염 구문은 데이터를 일반 텍스트로 해석하기 때문에, 실제 HTML을 출력하려면
v-html을 사용해야 함
<div v-html="rawHtml"></div>const rawHtml = ref('<span style="color:red">This should be red.</span>')2-3. Attribute Bindings
- 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에
v-bind를 사용 - 바인딩 값이
null이나undefined인 경우, 해당 속성은 렌더링 요소에서 제거됨
<div v-bind:id="dynamicId"></div>2-4. JavaScript Expressions
- Vue는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
- 사용 가능한 위치: 콧수염 구문 내부, 모든 디렉티브의 속성 값
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="`list-${id}`"></div>⚠️ 주의사항: 각 바인딩에는 하나의 단일 표현식만 포함될 수 있음. 선언문이나
if문은 사용 불가 (삼항 표현식 사용).
3. Directive
v- 접두사가 있는 특수 속성으로, 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용함.
Directive 전체 구문
v-on:submit.prevent="onSubmit"
└─ Name └─ Argument └─ Modifiers └─ Value| 구성 요소 | 설명 |
|---|---|
| Name | Directive의 핵심 이름 (v-로 시작, shorthand 사용 시 생략 가능) |
| Argument | Directive가 '무엇에 대해' 동작할지 알려주는 대상 (콜론 : 뒤에 위치) |
| Modifiers | 점(.)으로 표시되는 특별한 접미사로, 기본 동작을 수정 |
| Value | Directive에 연결될 JavaScript 표현식 |
Arguments (전달 인자)
<!-- href를 myUrl 값에 바인딩 -->
<a v-bind:href="myUrl">Link</a>
<!-- click 이벤트 수신 -->
<button v-on:click="doSomething">Button</button>Modifiers (수식어)
.(dot)으로 표시되는 특수 접미사. 예시로 .prevent는 event.preventDefault()를 자동 호출함.
<form v-on:submit.prevent="onSubmit">
<input type="submit">
</form>💡 디렉티브 하나에 여러 수식어를 이어 붙일 수 있음 (예:
@click.stop.prevent)
Built-in Directives
v-textv-showv-ifv-for
4. Dynamically Data Binding (v-bind)
하나 이상의 속성 또는 컴포넌트 데이터를 표현식에 동적으로 바인딩함.
Attribute Bindings (속성 바인딩)
<!-- v-bind 사용 -->
<img v-bind:src="imageSrc">
<a v-bind:href="myUrl">Move to url</a>
<!-- shorthand (약어): ':' -->
<img :src="imageSrc">
<a :href="myUrl">Move to url</a>Dynamic Attribute Name (동적 인자 이름)
대괄호([])로 감싸서 directive argument에 JavaScript 표현식을 사용할 수 있음.
<button :[key]="myValue"></button>⚠️ 대괄호 안에 작성하는 이름은 반드시 소문자로만 구성해야 하며, 띄어쓰기나 따옴표는 사용 불가.
5. Class and Style Bindings
class와 style은 모두 HTML 속성이므로 v-bind를 사용하여 동적으로 문자열 값을 할당할 수 있음. Vue는 객체 또는 배열을 활용하여 작성할 수 있도록 지원.
1.1 Binding HTML Classes: Binding to Objects
const isActive = ref(true)<!-- isActive가 true이면 'active' 클래스 적용 -->
<div :class="{ active: isActive }">Text</div>
<!-- 결과 -->
<div class="active">Text</div>반응형 변수를 활용하여 객체를 한번에 작성하는 방법:
const classObj = ref({
active: isActive,
'text-primary': hasInfo
})<div class="static" :class="classObj">Text</div>1.2 Binding HTML Classes: Binding to Arrays
const activeClass = ref('active')
const infoClass = ref('text-primary')<div :class="[activeClass, infoClass]">Text</div>
<!-- 결과 -->
<div class="active text-primary">Text</div>배열 구문 내에서 객체 구문 혼용도 가능:
<div :class="[{ active: isActive }, infoClass]">Text</div>2.1 Binding Inline Styles: Binding to Objects
const activeColor = ref('crimson')
const fontSize = ref(50)<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Text</div>
<!-- 결과 -->
<div style="color: crimson; font-size: 50px;">Text</div>kebab-cased 키 문자열도 지원하나, camelCase 작성 권장
2.2 Binding Inline Styles: Binding to Arrays
여러 스타일 객체를 배열에 작성해서 :style을 바인딩할 수 있으며, 객체들은 병합되어 동일한 요소에 적용됨.
const styleObj2 = ref({
color: 'blue',
border: '1px solid black'
})<div :style="[styleObj, styleObj2]">Text</div>6. Event Handling (v-on)
DOM 요소에 이벤트 리스너를 연결 및 수신.
<!-- 기본 -->
<button v-on:click="handler">Click</button>
<!-- shorthand: '@' -->
<button @click="handler">Click</button>Handler 종류
- Inline handlers: 이벤트가 트리거될 때 실행될 JavaScript 코드 (간단한 로직에 사용)
- Method handlers: 컴포넌트에 정의된 메서드 이름
<!-- Inline -->
<button @click="count++">Add 1</button>
<!-- Method -->
<button @click="increase">Hello</button>const increase = function () {
count.value += 1
}Method Handler - event 객체 자동 전달
@click="myFunc"처럼 괄호 없이 메서드 이름만 연결하면, 핸들러의 첫 번째 인자로 DOM의 event 객체가 자동으로 전달됨.
사용자 지정 인자 전달
기본 이벤트 대신 사용자 지정 인자를 전달할 수 있음.
<button @click="greeting('hello')">Say hello</button>
<button @click="greeting('bye')">Say bye</button>Inline Handlers에서 event 인자 접근
$event 변수를 사용하여 원래 DOM 이벤트에 접근 가능.
<button @click="warning('경고입니다', $event)">Warning</button>7. Modifiers
Event Modifiers
Vue는 Event Modifiers를 제공하여 event.preventDefault()와 같은 코드를 메서드 안에 직접 작성할 필요가 없도록 함. 메서드 로직을 순수하게 데이터 관련 처리에만 집중시킬 수 있음.
제공 modifier: stop, prevent, self, etc.
<form @submit.prevent="onSubmit">...</form>
<a @click.stop.prevent="onLink">...</a>⚠️ Modifiers는 chained 되게 작성할 수 있으며, 작성된 순서로 실행되기 때문에 작성 순서에 유의해야 함.
Key Modifiers
키보드 이벤트를 수신할 때 특정 키에 관한 별도 modifiers를 사용할 수 있음.
<!-- Enter 키 입력 시에만 onSubmit 호출 -->
<input @keyup.enter="onSubmit">
<!-- Ctrl + Enter로 댓글 등록 -->
<textarea @keydown.ctrl.enter="submitComment"></textarea>8. Form Input Bindings (v-model)
폼을 처리할 때 사용자가 input에 입력하는 값을 실시간으로 JavaScript 상태에 동기화해야 하는 경우 (양방향 바인딩).
양방향 바인딩 방법 2가지
방법 1: v-bind와 v-on을 함께 사용
<input :value="inputText1" @input="onInput">const onInput = function (event) {
inputText1.value = event.currentTarget.value
}방법 2: v-model 사용 (권장)
v-model은 form input 요소 또는 컴포넌트에서 양방향 바인딩을 만듦.
<input v-model="inputText2">v-model 활용 예시
<!-- Single Checkbox -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- Multiple Checkbox -->
<input type="checkbox" value="Alice" v-model="checkedNames">
<input type="checkbox" value="Bella" v-model="checkedNames">
<!-- Single Select -->
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>Alice</option>
<option>Bella</option>
<option>Cathy</option>
</select>📝 Summary
| 개념 | 요약 |
|---|---|
{{ }} | 텍스트 보간, 컴포넌트 데이터를 텍스트로 출력 |
v-html | 실제 HTML을 렌더링할 때 사용 |
v-bind / : | HTML 속성을 동적으로 바인딩 |
v-on / @ | DOM 이벤트 리스너 연결 |
v-model | form 요소의 양방향 데이터 바인딩 |
| Directive Modifiers | .prevent, .stop, .enter 등 동작 수정 |
