3.Directive(지시문) Vue엘리먼트를 위한 속성-2
5. v-else 디렉티브
v-if 디렉티브를 사용 했을때 그 아래에 v-else 디렉티브를 사용하는 엘리먼트를 넣어주면,
윗부분의 조건문이 만족하지 않을때 보여진다.
html 부분을 다음과 같이 수정해주자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else>value 가 5 보다 작아요</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
6. v-else-if 디렉티브
v-else-if 는 첫번째 조건문의 값이 참이 아닐 때, 다른 조건문을 체크하여 다른 결과물을 보여줄 수 있게 해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5보다 작아요</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>v-else-if 는, 언제나 v-if 디렉티브를 사용하는 엘리먼트의 다음위치에 있어야 한다. 만약에 v-else 디렉티브가 사용되는 경우엔 그 사이에 위치해있어야 하며, 이 디렉티브를 여러번 사용해도 된다.
7. v-pre 디렉티브
이 디렉티브는 특정 엘리먼트를 무시하는데에 사용 된다. 이걸 사용하므로서, Vue 시스템에서 해당 엘리먼트는 지시문이 없다는걸 인식하게 되어 그 엘리먼트 내부의 자식엘리먼트들을 신경쓰지 않고 그냥 건너뛴다.
이렇게 함으로써, 컴파일 속도가 빨라진다.
이 디렉티브를 사용하면 {{ }} 이런 머스태쉬 태그를 그대로 표시 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5보다 작아요</h1>
<h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
잘 됐다면, 한번 v-pre 를 없애보자. 그러면 페이지에 아무것도 안나타나게 된다. 콘솔을 열고 Run with JS 를 다시 눌러보면. 컴파일에 실패했다는 오류가 뜨게된다.
오류를 확인했다면 다시 v-pre 디렉티브를 입력하자.
8. v-cloak 디렉티브
이 디렉티브에 대해서 알아보기전에, 한번 JSBin 에서 Run With JS 버튼을 여러번 반복해서 눌러보자.
이 버튼이 클릭되면서, 자바스크립트가 다시 실행이 되는데. 그 과정에서 가끔씩 숨겨놨던 엘리먼트들이 정말 짧은순간 동안깜박이는 현상이 있다.
그 이유는, 아직 자바스크립트 코드가 실행되기 전이여서 그런데. 한번 그냥 단순히 Auto-run JS 체크박스를 잠깐 설정해제해보자. 자바스크립트가 실행되지 않으니 보여야하지 말아야할게 그대로 보일거다.
지금은 머스태쉬 태그를 작성하지 않았지만, 만약에 템플릿에 머스태쉬 코드를 작성했더라면 그 머스태쉬 태그가 그대로 나타났을거다.
만약에 자바스크립트가 실행 되기전에, 그러니까, Vue 인스턴스가 제대로 준비되기 전 까지 우리의 템플렛을 위한 HTML 코드를 숨기고 싶을 때 이 v-cloak 이라는 디렉티브를 사용합니다.
HTML 에서 #app 엘리먼트에 v-cloak 디렉티브를 설정해보세요 값 설정은 불필요하고 그냥 추가하기만 하면된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" v-cloak>
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5보다 작아요</h1>
<h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>이렇게만 한다고해서, 제대로 적용되지는 않는다. 추가적으로 할 작업이 있는데, CSS 부분에서 해당 attribute 가 있는 경우 display: none 스타일을 적용해야 비로소 숨겨진다.
JSBin 의 상단 CSS 탭을 열어서, 다음과같이 코드를 작성하자.
[v-cloak] {
display: none;
}
9. v-once 디렉티브
이번 포스트에서 마지막으로 다룰 v-once 디렉티브에 대하여 알아보자.
이 디렉티브를 사용하면, 컴포넌트를 초기에 딱 한번만 렌더링한다. 즉, 자바스크립트에서 사용하는 데이터를 사용하긴하는데, 변동이 없고 한결같은 정적인 부분을 보여줄 떄 사용한다.
자 이제 html을 코드를 다음과 같이 수정해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" v-cloak>
<h1 v-once v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5보다 작아요</h1>.
<h2 v-once>초기 값: {{ value }}</h2>
<h2>현재 값: {{ value }}</h2>
<h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>14번 줄에선 v-once 디렉티브를 사용하여 초기에만 한번 렌더링을 하도록 설정하고, 15번줄에서는 그냥 value 를 그대로 보여주게 했다.
초기 값은 그대로 고정이 되어있고 현재 값은 그때 그떄 업데이트 된다.
앞으로도 4개의 디렉티브가 남았는데, 나머지는 다음에 하나씩 해보도록 하자.