Directives

Directives란?

•  "v-" 접두사를 붙인 Attributes
• 주로 javascript 표현식으로 값을 나타내는 것이 일반적!!

 

Example)

<p v-if="seen"> Now you see me </p>  //true이면 <p> 전체가 보이고, false이면 <p> 전체가 보이지 않음

<a v-bind:href="url"></a>  // : 뒤에 선언한 href 인자를 받아 url 값이랑 매핑

<a v-on:click="doSomething"></a>  // 해당 a 테그의 클릭 이벤트를 감지하여 메소드("doSomething") 실행

 

 

 

이 밖에도 주로 쓰는 Directives는 아래와 같다.

 

Directives	역할
v-if	지정한 뷰 데이터 값의 true, false 여부에 따라 HTML 태그 표시를 표시하거나, 표시하지 않을 수 있음
v-for	지정한 뷰 데이터의 개수만큼 반복하여 HTML 태그를 출력함
v-show	v-if 처럼 HTML 태그를 화면에 표시하거나, 표시하지 않음 다만, 차이점은 v-if의 경우 화면에서 완전히 표시하지 않을 수 있지만 v-show는 display:none을 설정함
v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결함
v-on	화면 요소의 이벤트를 감지하여 처리할 때 사용.
v-model	폼에서 주로 사용되는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화함 <input>, <select>, <textarea> 태그에만 사용할 수 있음