Vue의 Basic Syntax 1
📌 Directive
'v-' 접두사가 있는 속성
v-on:submit.prevent="onSubmit"Name, Argument, Modifiers, Value 로 구성된다
Value는 자바스크립트에 값이 있어야 한다!
표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용한다
예시:
<button v-on:click="counter += 1">클릭 횟수: {{ counter }}</button>📄 Template Syntax
HTML 페이지를 어떻게 만들 것인가?
DOM에 Vue 객체의 데이터를 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용
Text Interpolation (v-text)
{{ }} 해당 구성 요소 인스턴스의 msg 속성 값으로 대체
예시:
<span>메시지: {{ msg }}</span>Raw HTML (v-html)
실제 HTML을 출력하려면 데이터를 해석해야 해서 v-html을 사용
예시:
<div v-html="rawHtml"></div>Attribute Bindings (v-bind)
속성에 바인딩 하기 위해서!
예시:
<img v-bind:src="imageSrc" alt="이미지">JavaScript Expressions
콧수염 구문 내부, 모든 directive 속성값 ('v-') 에서 모두 JavaScript 표현식을 사용할 수 있다!
예시:
<div>{{ message.split('').reverse().join('') }}</div>🔄 Dynamically data binding
- Attribute Bindings
- HTML의 속성 값을 Vue 상태 속성 값과 동기화 되도록
- v-bind shorthand -> :
- 대괄호로 감싸서 자바스크립트 표현식을 사용
- 여러 속성을 바인딩 하는 경우 하나의 객체로 몰아서 바인딩
예시:
<a :href="url" :title="'링크: ' + title">{{ linkText }}</a>- Class and Style Bindings
- 클래스 및 스타일과 함게 v-bind를 사용할 때 객체 or 배열을 사용하자
- 배열, 대괄호 등등
- 객체 형태로 바인딩 하는 것 권장!
예시:
<div :class="{ active: isActive, 'text-danger': hasError }"></div>CDN vs SFC
🖱️ Event Handling
v-on 구성(@)
- Inline handlers : 이벤트가 트리거 될 때 실행 될 JavaScript 코드
- Method handlers : 컴포넌트에 정의된 메서드 이름
예시:
<button @click="count++">인라인 핸들러: {{ count }}</button>Method Handlers
트리거 하는 기본 DOM 객체를 자동으로 수신한다
직접 호출하기 위해서는 Inline Handlers 에서 직접 호출
인자에 직접 접근하기 위해서는 $event 이런식으로 접근 가능
예시:
<button @click="greet">메서드 핸들러</button>Event Modifiers
Bubbling 밑에까지 찍고 올라오기
stop 버블링해서 다시 올라가는 도중 자기를 실행하고 멈춰버린다
prevent
self 자신이 소스인지 확인하고 소스인 경우에만 실행한다
capture
예시:
<form @submit.prevent="onSubmit">기본 동작 방지</form>Key Modifiers
엔터만 눌렸을 때 버튼을 처리하기 위해서는..?
예시:
<input @keyup.enter="submit">DOM 요소에 직접 접근
직접 접근하는 것을 지양하긴 하는데..
특정 요소를 지정하기 위해서는 ref 사용
예시:
<input ref="inputField">📝 Form Input Bindings
form을 처리할 때 사용자가 input에 입력하는 값을 실시간으로 JavaScript 상태에 동기화 해야 하는 경우
1. v-bind, v-on 함께 사용
2. v-model 사용
v-model을 활용한 실시간 입력데이터와 화면을 동기화!
예시:
<input v-model="message" placeholder="여기에 입력하세요">
<p>메시지: {{ message }}</p>Checkbox 활용
boolean 값, 배열
예시:
<input type="checkbox" v-model="checked"> {{ checked ? '체크됨' : '체크 안됨' }}Select 활용
예시:
<select v-model="selected">
<option value="">선택하세요</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
<span>선택됨: {{ selected }}</span>수식어 활용
.lazy, .number, .trim
예시:
<input v-model.trim="message"> <!-- 앞뒤 공백 자동 제거 -->
<input v-model.number="age" type="number"> <!-- 숫자로 자동 변환 -->
<input v-model.lazy="message"> <!-- change 이벤트 후 동기화 -->