I 기본 디렉티브 (9가지)

v-text

v-html

v-show

v-if, v-else-if, v-else

v-pre

v-cloak

v-once

I 1. v-text

{{ }} 는 머스태쉬 태그 이다. ( 수염처럼 생겼다 해서 머스태쉬 -ㅅ- )

그렇다면, 

{{ name }} 부분을 v- text 를 이용하여 바꾸어보자.

같은 결과를 나타내는것을 알 수 있다.

I 2. v-html

HTML 은 기본적으로 텍스트형태로만 렌더링되게 해주기때문에 태그를 차단하고, XSS 같은것도 차단하기에 유용

하지만, 가끔씩은 html 을 '렌더링' 해야 할 때가 있다. 

그럴 땐, “여기서 렌더링 할 건 html 형식이다” 라는걸 지정하기 위해서, v-html 이라는 디렉티브를 사용한다.

v- html 을 지정하지 않았을때는 태그모양 그대로 나온다

v-html 을 적용하면 html형식을 렌더링해서 정상적으로 보여준다.

I 3. v-show

v-show 는 이처럼 해당 element가 보여질지 아닐지 true/false 로 나타낼 수가 있다.

visible 이라는 변수는 사용자 지정이기때문에, 어떻게 설정하든 상관은 없다.

I 4. v-if, v-else-if, v-else

그냥 보면 뭔지 알 수 있다.

I 5. v-pre

이 디렉티브는 특정 엘리먼트를 무시하는데에 사용. 

이걸 사용함으로서, Vue 시스템에서 해당 엘리먼트는 지시문이 없다는걸 인식하게 되어 그 엘리먼트 내부의 자식엘리먼트들을 신경쓰지 않고,

그냥 건너뜀 

이렇게 함으로써, 컴파일 속도가 증가

v- pre 를 사용하면 위의 지시자들을 무시하고 정상적으로 출력이된다

v-pre 를 지워보면 에러가 발생하는것을 확인할 수 있다.

I 6. v-cloak

Run을 계속 눌러보면, 자바스크립트가 다시 실행이 되는것을 확인할 수 있을것이다. 

그 과정에서 우리가 숨겨놨던 엘리먼트들이 정말 짧은순간 동안 깜박이는 현상 발생할것이다.

Why ?

만약 자바스크립트가 실행 되기전에, 

즉, Vue 인스턴스가 제대로 준비되기 전 까지 우리의 템플렛을 위한 HTML 코드를 숨기고 싶을 때,

바로 이 v-cloak 이라는 디렉티브를 사용!

이렇듯, CSS부분도 설정해주어야 정상적으로 작동한다.

이제, JSFiddle 에서 Ctrl+Enter (실행) 을 계속 누르면서 어떻게 바뀌었는지 각자 확인해보자.

I 7. v-once

이 디렉티브를 사용하면, 컴포넌트를 초기에 딱 한번만 렌더링해준다. 즉, 자바스크립트에서 사용하는 데이터를 사용하긴하는데, 변동이 없고 한결같은 정적인 부분을 보여줄 떄 사용.

개발자도구(F12)의 콘솔창에서 app.value 의 값을 바꿔가면서 각자 결과를 확인해보자.