[VUE.JS] 뷰 디렉티브 사용해보기

2018. 2. 22. 10:40

[VUE.JS] 뷰 디렉티브 사용해보기

1. 소개

저번 포스팅에선 뷰를 CDN으로 불러와서 아주 간단하게 맛만보는 방법에 대해서 알아보았다.

이번 포스팅은 그 맛을 조금더 보도록 해보자.

저번 포스팅과 마찬가지로 js피들이나 jsbin 으로 간단하게 해볼수 있는 내용들이다.

vue.js 에는 앵귤러에 있는 디렉티브 라는것이 있다. 앵귤러는 안해봤지만 그런게 있다더라;

엘리먼트에 사용되는 지시문 같은 것인데 사용해보니 오... 이거 좀 짱인듯..

편리한 기능이다!

2. vue 디렉티브 종류

디렉티브의 종류는 13가지 종류가 있고 각 디렉티브의 종류와 기본적인 설명은 여기 에서 확을 해보도록 하자

이번 포스팅에서는

1) v-text

2) v-html

3) v-show

4) v-if

5) v-else

6) v-else-if

7) v-pre

8) v-cloak

9) v-once

이렇게 9가지에 대해서 알아보도록 하자

3. vue 디렉티브 사용 방법

1) v-text 디렉티브

저번 포스팅에선 {{}} 이런 모양을 사용했었는데 이번엔 다른 방법으로 엘리멘트 안에 값을 바꿔 보도록 하자

물론 저번과 마찬가지로 jsbin이나 피들을 사용하자

jsbin은 여기서 사용할 수 있다.

이전 포스팅 :

2018/02/19 - [Yame Programmer/VUE.JS] - [VUE.JS] VUE[뷰] 시작해보기

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-cloak>
  <h1>Hello</h1>
  <h2 v-text="value"></h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

JS

1
2
3
4
5
6
7
8
9
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"안녕?"
}
});
Colored by Color Scripter
cs

결과

오.. !! 간단!!!!

2) v-html

v-html 디렉티브는 value 안에 있는 html을 구현해주는건데

일단

위의 코드에서

value를 <h5>야매 가이드</h5>

이렇게 바꾸면

이렇게 출력이 되는데

html의 v-text를 v-html로 바꿔보자

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-cloak>
  <h1>Hello</h1>
  <h2 v-html="value"></h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

js

1
2
3
4
5
6
7
8
9
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"<h5>야매 가이드</h5>"
}
});
Colored by Color Scripter
cs

결과

이렇게 html이 적용이 되서 출력이 된다.

그러나 악성코드나 XSS등의 위험이 있으니 필터링 잘 걸어놓고 사용하도록 하자.

3) v-show 디렉티브

v-show는 보여줄지 안보여줄지 지정하는 디렉티브다.

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-show="visible" v-text="value">하이하이</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

js

1
2
3
4
5
6
7
8
9
10
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"야매 가이드드",
  visible:true
}
});
Colored by Color Scripter
cs

결과

visible의 값은 true, false 번갈아 가면서 적용을 해보면

true일때는 값이 보이고 false일떄는 보이지 않게 되는 것을 알 수 있다.

그리고 콘솔창에 app.visible = false 입력하면 사라지고

app.visible = true 입력하면 다시 보이게 된다.

4) v-if 디렉티브

v-if는 조건문을 사용 할 수 있는 디렉티브 이다

값이 참이면 보여주고 거짓이면 안보여준다!

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

js

1
2
3
4
5
6
7
8
9
10
11
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:2
}
});
 
 
Colored by Color Scripter
cs

결과

value 가 2일떄

value 9일때

5) v-else 디렉티브

v-if가 있으니 v-else도 있겠지!

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

js는 위의 코드 그대로 사용 한다.

결과

6) v-else-if

else가 있으니 else if도 있겠지!!

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

js 생략

value 값만 바꿔보면됨

결과

7) v-pre 디렉티브

v-pre는 엘리먼트를 무시하는데 사용 합니다.

v-pre가 적영된건 지시문이 없다는걸 인식하고 건너뛰어 버립니다.

내부 자식들 신경 안쓰고 건너뛰어 버리니까 컴파일 속도가 빨라지는 효과를 볼 수가 있다.

지금 테스트 하고 있는 cdn으로 불러와서 사용할떈 저 작업이 브라우저 에서 이루어 지는데

기본적으로 빠르긴 해도 규모카 큰 프로젝트에선 성능이슈가 생길 수 있는데

vue 커맨드 라인 인터페이스를 이용해 사전에 빌드 작업을 거치면 해당 이슈 해결이 가능 하다고 한다.

그런데 어케 하는진 모름 ㅋ 그냥 이런 방법이 있다는걸 알아만 두자.

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  <h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

저기서 v-pre를 빼면 콘솔창에 에러메시지가 나타난다.

그런데 v-pre를 쓰면 에러메세지가 안나타남

{{}} 이 값을 뷰에서 값을 가져오는게 아니라 걍 텍스트로 인식하게 함

결과

v-pre 적용

v-pre 제거하면 아래처럼 컴파일 오류가 생긴다.

8) v-cloak 디렉티브

v-cloak 디렉티브는 뷰js가 역할을 전부 수행하고 난 뒤 화면에 표현해주는 역할을 한다.

보통 컴퓨터들 속도 빨라져서 저 기능을 안써도 될거 같긴 한데

속도가 느린 브라우저에서는 v-if나 v-show 기능으로 안보이게 해놓은 엘리먼트들이

뷰 스크립트 구동전에 화면에 나타나고 뷰가 구동되면 사라지게 되는 깜빡임 현상이 나타낼수 있다.

뷰 컨트롤하는 스크립트가 복잡하고 길어지면 성능 좋은 컴퓨터에서도 깜빡임 현상이 일어날수도 있고.

그래서 아얘 스크립트가 전부 구동이 된 후에 화면을 보여주게 만드는 디렉티브다.

대신에 디렉티브 하나만 넣는게 아니라 아래 css 처럼 기본적으로 display:none 를 해주어야 한다

안그러면 소용이 없다.

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-claok>
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  <h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

css

1
2
3
4
[v-cloak] {
display: none;
}
cs

9) v-once 디렉티브

v-once 는 초기 구동 딱 한번만 값을 지정하고 그 이후엔 변하지 않도록 하는 디렉티브 이다.

렌더링을 한번만 하고 그 이후엔 얘는 건들이지 않겠다 라고 선언하는 것이다.

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-once>초기 값: {{ value }}</h2>
<h2>현재 값: {{ value }}</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Colored by Color Scripter
cs

js

1
2
3
4
5
6
7
8
9
10
11
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:5
}
});
 
 
Colored by Color Scripter
cs

console

app.value = 7

app.value = 0

결과

v-once를 사용하지 않았으면 초기값 현재값 둘다 0이 되어야 하지만

v-once를 사용해 현재값만 0으로 바뀌어 있는걸 확인 할 수 있다.

이 디렉티브는 업데이트 성능을 최적화 할때 사용한다고 하는데

흠.. 뭐 초기값이랑 비교 할떄 사용해도 좋을거 같고 유용해 보인다.

★

9가지 디렉티브들을 살펴 보았는데

처음 vue가 어려우면 어떡하지 하는 걱정과는 다르게

많이 쉽게 접근할 수가 있었다

물론 나중에 CLI로 실제 프로젝트 할떈 또 어떤 헬파티가 열릴진 모르겠지만.

아주아주 간단하게 서버와 상관없이 클라이언트쪽에서만 vue를 활용해볼수도 있겠다

라는 희망을 주기 딱 좋은 맛보기 였던것 같다.

다음 포스팅에선 이번에 포스팅하지 못했던 나머지 디렉티브들에 대해서 살펴 보기로 하자.

저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기 (1)	2018.02.28
[VUE.JS] 뷰 디렉티브 v-bind 사용하기 (2)	2018.02.26
[VUE.JS] VUE[뷰] 시작해보기 (0)	2018.02.19

기타치는 개발자의 야매 가이드