Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 리액트
- 알고리즘
- Python
- TypeScript
- 싸피셜
- db
- react
- sqld
- VITE
- SQL
- 백준
- SSAFY
- 데코레이터
- queryset
- 머신러닝종류
- Django
- Javascript
- SSAFYcial
- unionfind
- vitepwa
- 싸피10기
- js
- QuerySetAPI
- 셀프넘버
- 플로이드워셜
- PWA
- git
- pwa적용하기
- 싸피
- 14658
Archives
- Today
- Total
Meme's IT
[Vue] Directive 본문
# Directive란?
'v-' 접두사가 있는 특수 속성
- Directive의 속성 값은 단일 JavaScript 표현식이어야 함(v-for, v-on은 제외)
- 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용
<p v-if="seen">v-if가 true면 출력됨</p>
# Directive의 구조
🔹 Arguments
일부 directive는 directive 뒤에 콜론(:)으로 표시되는 인자를 사용할 수 있음
<a v-bind:href="myUrl">Link</a>
▶ 위의 코드에서 href는 HTML a 요소의 href 속성 값을 myUrl 값에 바인딩 해주는 v-bind의 인자
<button v-on:click="doSomething">Button</button>
▶ click은 수신할 이벤트 이름을 작성하는 v-on의 인자
🔹 Modifiers
.(dot)으로 표시되는 특수 접미사로, directive가 특별한 방식으로 바인딩되어야 함을 나타냄
<form @submit.prevent="onSubmit">
<input type="submit">
</form>
▶ .prevent는 발생한 이벤트에서 event.preventDefault()를 호출하도록 v-on에 지시하는 modifier
'FrontEnd > Vue' 카테고리의 다른 글
[Vue] v-on (0) | 2023.11.02 |
---|---|
[Vue] v-bind (Attribute, Class, Style) (0) | 2023.11.02 |
[Vue] Template Syntax (0) | 2023.11.02 |
[Vue] Vue의 기본 구조 (0) | 2023.11.01 |
[Vue] Front-end 사전지식 (0) | 2023.11.01 |