빌트인 디렉티브 - Vue.js

v-text

• 요구 되는 값 string
• element의 텍스트 컨텐츠 업데이트
• 기존 컨텐츠 덮어씀
• 일부를 업데이트 하는 경우 이중 중괄호{{}} 사용

<span v-text="msg"></span>
<!-- 아래와 같음 -->
<span>{{msg}}</span>

 

v-html

• 요구 되는 값 string
• element의 innerHTML 업데이트
• Vue 템플릿 문법을 처리하지 않고 일반 HTML 로 삽입됨

⚠️ 임의의 HTML 동적으로 렌더링하는 것은 XSS 공격에 취약해 지므로 신뢰할 수 있는 컨텐츠에만 사용

<div v-html="html"></div>

 

v-show

• 요구 되는 값 any
• 표현식의 truthy 값을 기반으로 element 가시성 전환
• display CSS 속성을 설정, 조건이 변경될 때 전환을 트리거
  • true면 화면에 보이고(display:auto 또는 display:inherit)
  • false이면 화면에 안 보임(display:none)

v-if

• 요구 되는 값 any
• 표현식의 truthy 값을 기반으로 element 또는 템플릿 일부를 조건부로 렌더링
  • true 이면 렌더링
  • false이면 요소를 생성하지 않음 ↔ v-show display:none으로 DOM이 유지됨
• 텍스트 또는 엘리먼트를 포함하는 조건부 블록을 나타내기위해 <template> 사용 가능
• v-for 보다 우선순위 높음

 

v-else

• v-if 또는 v-else-if 체인에 대한 else
• 표현식 허용하지 않음
• <template>에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용 가능

 

v-else-if

• 요구 되는 값 any
• 계속 이어서 사용 가능
• <template>에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용 가능

 

v-for

• 요구되는 값 Array | Object | number | string | Iterable
• 소스 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링

<!-- *alias in expression* 문법을 사용해야 함 -->
<div v-for="item in items">
    {{ item.text }}
</div>

<!-- 인덱스의 별칭 지정 가능 -->
<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

<!-- 강제로 엘리먼트를 재정렬할 때 속성 key 사용-->
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

 

v-on

• 단축 문법 @
• 요구되는 값 Function | Inline Statement | Object (without argument)
• 인자 event (선택)

수식어	설명
.stop	event.stopPropation() 호출
.prevent	event.preventDefault() 호출
.capture	캡처 모드로 이벤트 등록
.self	이벤트가 이 엘리먼트에서 전달된 경우에만 트리거 됨
.{keyAlias}	이벤트가 특정 키에 대해서만 트리거 됨
.once	이벤트가 한 번만 트리거 됨 (일회용)
.left	마우스 왼쪽 버튼으로만 이벤트가 트리거 됨
.right	마우스 오른쪽 버튼으로만 이벤트가 트리거 됨
.middle	마우스 중앙(힐 클릭)버튼으로만 이벤트가 트리거 됨
.passive	{passive:true} 옵션으로 DOM 이벤트를 등록

<!-- 메서드 핸들러 -->
<button v-on:click="doThis"></button>

<!-- 동적 이벤트 -->
<button v-on:[event]="doThis"></button>

<!-- 인라인 표현식, 이벤트 객체에 접근 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 단축 문법 -->
<button @click="doThis"></button>

<!-- 단축 문법 동적 이벤트 -->
<button @[event]="doThis"></button>

<!-- 전파 중지 -->
<button @click.stop="doThis"></button>

<!-- event.preventDefault() 작동 -->
<button @click.prevent="doThis"></button>

<!-- 표현식 없이 event.preventDefault()만 사용 -->
<form @submit.prevent></form>

<!-- 수식어 이어서 사용 -->
<button @click.stop.prevent="doThis"></button>

<!-- 키 별칭을 수식어로 사용 -->
<input @keyup.enter="onEnter" />

<!-- 클릭 이벤트 단 한 번만 트리거 -->
<button v-on:click.once="doThis"></button>

<!-- 객체 문법 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

 

v-bind

• 요구되는 값 any (인자 O) | Object (인자X)
• 인자 attrOrProp (선택)

수식어	설명
.camel	kebab-case 소성 이름을 camelCase로 변환
.prop	바인딩을 DOM속성(property)로 강제 설정 (3.2+)
.attr	바인딩을 DOM(attribute)으로 강제 설정 (3.2+)

• 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 단방향 바인딩

<!-- 속성 바인딩 -->
<img v-bind:src="imageSrc" />

<!-- 동적인 속성명 -->
<button v-bind:[key]="value"></button>

<!-- 단축 문법 -->
<img :src="imageSrc" />

<!-- 같은 이름 생략 가능 (3.4+), 오른쪽과 같음 :src="src" -->
<img :src />

<!-- 단축 문법과 동적 속성명 -->
<button :[key]="value"></button>

<!-- 인라인으로 문자열 결합 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 바인딩 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 바인딩 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 속성을 객체로 바인딩 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 바인딩. "prop"은 자식 컴포넌트에서 선언되어 있어야 함 -->
<MyComponent :prop="someThing" />

<!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

<!-- .prop 수식어는 전용 단축 문법 .가 있음 -->
<div :someProperty.prop="someObject"></div>
<!-- 위 코드는 아래와 같이 단축할 수 있음 -->
<div .someProperty="someObject"></div>

 

v-model

• 요구되는 값 사용자 입력을 받는 폼 엘리먼트 또는 컴포넌트의 출력 값에 따라 다름
• 다음으로 제한 됨 <input> <select> <textarea> 컴포넌트

수식어	설명
.lazy	input 에서 엔터를 치거나 포커스 이동했을 때(change 이벤트) 입력값과 속성을 동기화
.number	유효한 입력 문자열을 숫자로 변환해 전달
.trim	문자열의 앞뒤 공백을 자동으로 제거