[Vue] Directive - cloak, once, for (정적인 Directive 모음)

Directive 란?
-Directive를그대로 번역하면 지시문이라는 뜻이다.
- 한마디로 Vue 엘리먼트에서 사용되는 특별한 속성으로 엘리먼트에게 어떻게 동작할지를 지시한다고 생각하면 쉽다.
- 디렉티브는 Vue 의 기능들을 사용하기 위해서 사용하는, HTML 태그 안에 들어가는 하나의 속성이고, 사용방법은v-if와 같이v-라는 prefix가 붙는다.
- 디렉티브 종류 : v-text, v-html, v-show, v-if, v-else, v-else-if, v-pre, v-cloak, v-once...

v-cloak
- 다른 디렉티브에 대한 설명은 Vue.js 공식 홈에서 확인하고, 특별히v-clock에 대해 설명하자면,
- 자바스크립트 코드가 실행되기 전 머쉬태그에 바인딩 해놓은 데이터가 바인딩이 안되었다가 자바스크립트 코드가 실행되면서 값이 채워지는데 이때 잠깐 동안 깜빡이는 현상이 나타난다.

{{ }} 이런 문법을 머스태쉬 태그라고 부른다. (생긴게 수염 같다고해서 머스태쉬라고 부른다고 한다) 

 

- 만약에 자바스크립트가 실행 되기전에, 그러니까, Vue 인스턴스가 제대로 준비되기 전 까지 우리의 템플렛을 위한 HTML 코드를 숨기고 싶을 때 이 v-cloak 이라는 디렉티브를 사용한다.

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

v-for
- PHP의 foreach 처럼 루프를 실행하는데 key, value 값이 PHP 랑 달라서 사용방법만 따로 메모한다.
- 사용방법 :

<li v-for="todo in todos">{{ todo.text }}</li>

<li v-for="(todo, index) in todos">{{ todo.text }}</li>

참고사이트 : https://velopert.com/3118