[Vue3] v- 지시자 directive

 

● v-

 : directive (지시자)

 

 

v-model

 : input, textarea, select 등의 폼 요소와 Vue 데이터 간에 값을 주고받을 수 있는 양방향 바인딩(two-way binding) 구현하는 지시자

 

ex)

<input v-model="msg">

msg변수에 값을 입력할 수 있도록 해주는 문법

<template>
  <input v-model="username" />
  <p>입력한 이름: {{ username }}</p>
</template>

-> 사용자가 입력하면 username 값이 실시간으로 바뀌고, 바로 출력된다

 

 

 

지시자	설명
v-model	양방향 바인딩 – 폼 입력 요소와 데이터 간 연결
v-bind	속성 바인딩 – HTML 속성에 데이터를 바인딩함 (:로 축약 가능)
v-if	조건부 렌더링 – 조건이 참일 때만 DOM에 요소 표시
v-else-if / v-else	v-if와 함께 조건 분기
v-show	v-if와 유사하지만, CSS로 display: none 처리
v-for	반복 렌더링 – 배열/객체를 반복 출력
v-on	이벤트 리스너 – 클릭, 입력 등 이벤트 핸들링 (@로 축약 가능)
v-slot	슬롯 바인딩 – 컴포넌트 슬롯 제어
v-pre	마운트 전 Vue 템플릿 구문을 출력 그대로 보이게 함
v-cloak	Vue 앱이 완전히 로드되기 전까지 감춤
v-once	초기 렌더링 후 다시 렌더링하지 않도록 함 (정적 콘텐츠에 유용)

 

 

축약형

• v-bind:src="imgUrl" → :src="imgUrl"
• v-on:click="doSomething" → @click="doSomething"