Vue 템플릿 문법 - Interpolation(보간법) , Directive

 

 

 

https://v3-docs.vuejs-korea.org/guide/essentials/template-syntax.html#directives

템플릿 문법 | Vue.js

 

 

 

~~ Vue 공식 홈페이지 정리  ~~  

 

 

 

 

텍스트 보간법(Interpolation)

 

 

 

Vue 에서 Interpolation 이란 ? 

 

{{ }}을 사용하여 JavaScript 데이터를 HTML에 삽입하는 방식

 

 

 

 

사용 예시 ) 

<h1>{{ name }}</h1>

 

 

# HTML 출력

 

이중 중괄호는 데이터를 HTML 이 아닌 일반 텍스트로 해석함 ! 

-> 실제 HTML 을 출력하려면 `v-html` 디렉티브를 사용

 

 

 

 

디렉티브 

 

Directive 

 

: Vue에서 DOM 요소에 특수한 반응형 동작을 추가할 수 있게 해주는 문법

HTML 태그에 v- 로 시작하는 속성들

 

 

# 단축문법

• v-bind 는 매우 일반적으로 사용되기 때문에 전용 단축 문법이 있음 -> ':'
• `:` 로 시작하는 속성
• 예시 )

<div :id="dynamicId"></div>

 

 

 

# 커스텀 디렉티브

 

• 기본 디렉티브는 Vue에서 제공해주지만 커스텀 디렉티브가 필요한 경우에는 특정 기능을 만들 수 있다.
• <script setup>으로 명시적으로 등록할 필요는 없지만, vNameOfDirective라는 네이밍 스키마를 따라야 함 ! 
• 예시 ) 자동 포커스 디렉티브

 

Composition API 로 작성 

 -  mounted 훅에서 el.focous() 를 호출 해서 input  태그에 자동으로 포커스를 가게 해주는 커스텀 디렉티브 

<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