[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
| <!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
| // 새로운 뷰를 정의합니다 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
| <!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
| // 새로운 뷰를 정의합니다 var app = new Vue({ el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다 // data 는 해당 뷰에서 사용할 정보를 가지고 있습니다. data: { value:"<h5>야매 가이드</h5>" } }); | cs |
결과
이렇게 html이 적용이 되서 출력이 된다.
그러나 악성코드나 XSS등의 위험이 있으니 필터링 잘 걸어놓고 사용하도록 하자.
3) v-show 디렉티브
v-show는 보여줄지 안보여줄지 지정하는 디렉티브다.
html
| <!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
| // 새로운 뷰를 정의합니다 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
| <!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
| // 새로운 뷰를 정의합니다 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
|
[v-cloak] { display: none; } | cs |
9) v-once 디렉티브
v-once 는 초기 구동 딱 한번만 값을 지정하고 그 이후엔 변하지 않도록 하는 디렉티브 이다.
렌더링을 한번만 하고 그 이후엔 얘는 건들이지 않겠다 라고 선언하는 것이다.
html
| <!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
| // 새로운 뷰를 정의합니다 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를 활용해볼수도 있겠다
라는 희망을 주기 딱 좋은 맛보기 였던것 같다.
다음 포스팅에선 이번에 포스팅하지 못했던 나머지 디렉티브들에 대해서 살펴 보기로 하자.
