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 의 값을 바꿔가면서 각자 결과를 확인해보자.
