디렉티브

■ 디렉티브 ( Directive )

 

디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다.

 

□ 단방향 디렉티브

 

뷰(HTML 요소)에서 값을 변경하더라도 모델 객체의 값이 변하지 않는다.

 

v-text `` innerText 속성에 연결된다. 태그 문자열을 HTML 인코딩하여 나타내기에 화면에는 태그 문자열이 그대로 나타난다. {{ }} 머스텟취와 같은 기능. data를 text로 표현하는데 사용된다.   ex) <div v-text="data"></div>

 

 

v-html innerHTML 속성에 연결된다. 태그 문자열을 파싱하여 화면에 나타낸다. HTML 인코딩과 디코딩을 수행하지 않기에, XSS 공격에 취약하다.  ( v-text 사용이 권장된다. ) javascript 의 innerHTML 과 같은 기능 . data 에 html 구문이 있으면 html로 표현한다.         ex) <div v-html="tag"></div>       data : {                  tag : "<a href='Link'>Link</a>"        }        주의점   v-html="<a href='...'>...</a>" ( X )  이 방식은 불가하다 data의 값으로만 표현가능

 

v-bind 디렉티브는 요소의 컨텐츠 영역을 설정하는 것이 아닌, HTML 요소 객체들의 속성들을 바인딩하기 위해 사용된다. v-bind:src를 :src로 줄여서 표현 가능

 

 

□ 양방향 디렉티브

 

v-model -. 양방향 데이터 바인딩이다. HTML 요소 값을 다룬다. 텍스트 박스 외에도 여러 가지 입력 폼 필드에서도 사용할 수 있다. 모델에서 뷰, 뷰에서 모델로의 바인딩이 가능하다. -. 여러 개의 아이템을 선택할 수 있는 checkbox나 selectmultibox의 경우 모델 객체의 배열 객체와 연결 -. radio나 select인 경우는 모델 객체의 단일 값과 바인딩 된다.

 

 

 

□ 이벤트 디렉티브

 

v-on

 

 

 

□ 조건 디렉티브

 

v-show 값을 보여주거나 숨길때 사용. boolean 으로 판단된다 ex)  <div v-show="true"> 보인다. </div>       <div v-show="false"> 안 보인다. </div>

 

 

v-if, v-else v-show 와 같은기능 . 일반 서버언어와 사용법이 같다. ex) <div v-if="true">true면 보인다.</div>      <div v-else>false면 안보인다.</div>

 

 

* v-show 와 v-if 의 차이점 

v-if와 v-show는 비슷한 기능을 수행하지만, 렌더링 여부에 차이가 있다.

v-if는 조건에 부합하지 않으면 렌더링하지 않지만, v-show는 일단 렌더링한 후 display 스타일 속성으로 화면을 보여줄지 판단한다. 

v-show 는 false 를 받았을때 css ) display:none 에 의해 text 가 가려진다. 그래서 처리가 단순하다.

v-if 는 true 를 받지않는 이상 데이터 처리를 하지 않는다. true가 반환되면 처리 절차를 진행한다.

그래서 ! v-show 는 여러번의 이벤트 처리를 할때 좋다. boolean 이 뭐가 들어오든 어쨋든 처리가 되서 나오니까.

v-if 는 될 수 있으면 최초 한번을 사용하는것이 좋다. 하지만 속도는 체감할 수 없으니 일단은 자유 ~

 

 

 

□ 반복 렌더링 디렉티브

 

 

□ 기타 디렉티브