728x90
https://v3-docs.vuejs-korea.org/guide/essentials/template-syntax.html#directives
템플릿 문법 | Vue.js
v3-docs.vuejs-korea.org
~~ Vue 공식 홈페이지 정리 ~~
1. 텍스트 보간법(Interpolation)
Vue 에서 Interpolation 이란 ?
{{ }}을 사용하여 JavaScript 데이터를 HTML에 삽입하는 방식
사용 예시 )
<html />
<h1>{{ name }}</h1>
# HTML 출력
이중 중괄호는 데이터를 HTML 이 아닌 일반 텍스트로 해석함 !
-> 실제 HTML 을 출력하려면 `v-html` 디렉티브를 사용
2. 디렉티브
Directive
: Vue에서 DOM 요소에 특수한 반응형 동작을 추가할 수 있게 해주는 문법
HTML 태그에 v- 로 시작하는 속성들
# 단축문법
- v-bind 는 매우 일반적으로 사용되기 때문에 전용 단축 문법이 있음 -> ':'
- `:` 로 시작하는 속성
- 예시 )
<html />
<div :id="dynamicId"></div>
# 커스텀 디렉티브
- 기본 디렉티브는 Vue에서 제공해주지만 커스텀 디렉티브가 필요한 경우에는 특정 기능을 만들 수 있다.
- <script setup>으로 명시적으로 등록할 필요는 없지만, vNameOfDirective라는 네이밍 스키마를 따라야 함 !
- 예시 ) 자동 포커스 디렉티브
Composition API 로 작성
- mounted 훅에서 el.focous() 를 호출 해서 input 태그에 자동으로 포커스를 가게 해주는 커스텀 디렉티브
<javascript />
<script setup>
import { onMounted } from 'vue'
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus placeholder="입력하세요" />
</template>
뷰에서 지공하는 디렉트브는 다음 공식문서를 참고하자
https://ko.vuejs.org/api/built-in-directives.html#v-show
Vue.js
Vue.js - 프로그래시브 자바스트립트 프레임워크
ko.vuejs.org
728x90
'Frontend > Vue' 카테고리의 다른 글
| Composition API 의 ref( ) 간단 개념 및 사용법 (0) | 2025.04.09 |
|---|---|
| defineProps : props 값 전달하기 (0) | 2025.04.07 |
| Vue - index.html 에서 ES 모듈 인식 (0) | 2025.04.03 |
| vite 의 설정 파일( vite.config.js )의 기본설정 (0) | 2025.04.03 |
| Vue 란 ? 간단 개념 및 특징 - 선언적 렌더링과 반응성 이해하기 (0) | 2025.04.03 |
