[Vue.js] 디렉티브(Directives)

Directives

• HTML 태그에 붙어서 Vue의 반응형 기능을 지시한ㄴ 명령어
• DOM과 반응형 상태 연결
• 반응형 상태는 변수 형식으로 지정

 

주요 디렉티브

디렉티브	설명
v-text	텍스트 콘텐츠를 표현식의 값으로 업데이트 {{ }} 사용하는 것과 유사한 효과
v-html	요소의 HTML 콘텐츠를 표현식의 값으로 업데이트 v-text와 유사하지만, html이 적용되어 나타남 XSS(크로스 사이트 스크립팅) 에 주의
v-bind	속성을 표현식(변수, 함수, 객체 등)에 동적으로 바인딩
v-model	폼 입력<input>과 Vue 인스턴스 데이터 간에 양방향 데이터 바인딩
v-if	표현식의 참/거짓에 따라 요소 또는 템플릿 <template> 블록을 조건부로 렌더링 v-else-if, v-else 와 함께 사용 가능
v-show	표현식의 참/거짓에 따라 요소를 보이거나 숨김 v-if는 DOM에서 없애는 방식이라면, v-show는 display 속성으로 보이거나 숨김
v-for	배열의 각 항목 또는 객체의 각 프로퍼티(키-값 쌍) 마다 템플릿을 생성하여 동적인 컨텐츠를 렌더링
v-on	클릭 또는 키 입력과 같은 사용자 이벤트에 응답하고자 지정 메서드를 실행 @으로 축양하여 사용 가능

 

v-text 예제

<template>
	<div>
    	<p v-text="message"></p>
    </div>
</template>

<script setup>
	const message = "Hello <strong> Vue! </strong>" // html 적용 되지 않고 태그가 들어간 채로 렌더링
</script>

 

v-bind 예제

<template>
	<a :href="link">내 페이지</a>
</template>

<script setup>
	const isLoggedIn = false;
    const link = isLoggedIn ? '/mypage' : '/login';  // 로그인 상태에 따라 렌더링되는 페이지가 달라진다. 
</script>

 

v-model 예제

<template>
	<div>
    	<input v-model="message" placeholder="Type Something"> 
        <p> Message: {{ message }} </p>  
    </div>
</template>

<script setup>
	import { ref } from 'vue';
    
    const message = ref(""); // 양방향 바인딩: 입력 결과가 바로 출력으로 반영
</script>

 

v-if 예제 + v-on 예제

<template>
	<div>
    	<button @click="toggleLogin"> Toggle Login </button>  <!-- v-on 축약형, 이벤트 리스너 -->
        <p v-if="isLoggedIn"> Welcome back! </p>  <!-- v-if로 변수의 참/거짓 판단 -->
        <p v-else> Please Log in </p>
    </div>
</template>

<script setup>
	import { ref } from 'vue';
    
    const isLoggedIn = ref(false);
    
    const toggleLogin = () => {
    	isLoggedIn.value = !isLoggedIn.value;
     };
</script>

 

v-for 예제

<template>

	<div>
    	<h2> 국가 목록 </h2>
        <ul>
        	<li v-for="item in items" :key="item.code"> {{ item.name }} </li>
        </ul>
    </div>
</template>

<script setup>

	import { ref } from 'vue'
    
    const itmes = ref([
    	{code: 'KR', name: '대한민국'},
        {code: 'US', name: '미국'},
        {code: 'JP', name: '일본'},
    ])
</script>