[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>
cs



JS


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



js


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



js


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



js


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



js


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

+ Recent posts

티스토리툴바