directive

지시

~~하게 작동하라.

라고 지시하는 것과 같다.

예를들어 v-html v-if v-show 등등 v-bind

이런 것들을 vue 내장 directive 라고 한다.

v-text

돔의 text contents를 업데이트 한다.

{{}} 이걸로 렌더링하는 방법을 의미한다.

v-text는 html로 인식 안하고 문자열로 인식한다,.

<template>
	<div>
		<p>{{ msg }}</p>
		<p v-text="msg"></p>
		<p v-html="htmlstr"></p>
	</div>
</template>

<script>
	import { ref } from 'vue';
	export default {
		setup() {
			const msg = ref('안녕하세요');
			const htmlstr = ref('<strong>안녕!!</strong>');
			return {
				msg,
				htmlstr,
			};
		},
	};
</script>

<style></style>
;

위와 같이 사용할 수 있다.

v-cloack

이건 그냥 cdn으로 실습을 진행하였음.

script 태그를 복사하여 사용하였음.

<p v-cloak> {{message}} </p>

컴포넌트가 준비되니까 해당 데이터를 넣어줌.

그래서 css에 설정을 해서 v-cloack 을 지정해서 display:none을 넣어주면

해당 데이터가 있으면 그제서야 데이터를 띄우는 식으로 구현이 가능하다.

이런 걸 사용하면 loading bar 등을 사용할 수 있다.

v-once

한번만 렌더링할 때 사용한다. 신경안써도 되는 아이이기에 그렇기에 업데이트 성능을 최적화 할 수 있다.

v-memo

성능과 관련된 디렉티브임.

해당 반응형 데이터가 업데이트 됐을 때만 렌더링 된다.

<template>
	<div>
		<div v-memo="[subscribe]">
			<p>subscribe : {{ subscribe }}</p>
			<p>views : {{ views }}</p>
			<p>likes : {{ likes }}</p>
			<button @click="subscribe++">subscribe</button>
			<button @click="views++">views</button>
			<button @click="likes++">likes</button>
		</div>
	</div>
</template>

<script>
	import { ref } from 'vue';
	export default {
		setup() {
			const subscribe = ref(4000);
			const views = ref(4000);
			const likes = ref(20);

			return {
				subscribe,
				views,
				likes,
			};
		},
	};
</script>

<style></style>

위에서 보면 subscribe 버튼에만 반응하여 업데이트 한다.

일반적인 예로 v-for에서 목록을 렌더링 할 때

그 길이가 1000개 이상인 경우 사용하면 좋다고 한다.

디렉티브 구성

v-on:submit.prevent = “onSubmit”

v- 하고 나오는것이 디렉티브임

그다음에 : 하고 전달인자를 가짐.

. 하고 오는 것은 수식어

그리고 “ “ 안에 들어가는 건 값

커스텀 디렉티브를 만들 수 있다.

뒤에서 다룬다고 함.