Vue 디렉티브

Vue 디렉티브

디렉티브는 v-접두사가 있는 특수 속성

디렉티브 속성 값은 단일 javaScript표현식이 된다

디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

 

v-once

데이터 변경 시 업데이트 되지 않은 일회성 보간을 수행

ex) <span v-once>다시는 변경되지 않음{{msg}}</span>

 

v-text

innerText 속성에 연결

태그 문자열을 html 인코딩하여 나타내기 떄문에 화면에는 태그 문자열이 그대로 나타남

 

v-html

이중 중괄호는 html이 아닌 일반 텍스트로 데이터를 해석

실제 html 출력하려면 v-html 디렉티브를 사용

XSS 공격에 취약하여 꼭 필요한 경우가 아니라면 v-text를 사용 추천

ex<span v-html=“data”></span>

데이터안 html태그 자동으로 변환

 

v-model

양방향 바인딩 처리를 위해서 사용

 

v-bind

엘리먼트의 속성과 바인딩 처리를 위해서 사용

v-bind는 약어로 :로 사용 가능

 

v-show

조건에 따라 엘리먼트를 화면에 렌더링

style의 display를 변경

항상 랜더링

false일경우 display:none 적용

template 지원하지 않음

 

v-if

조건에 따라 엘리먼트를 화면에 렌더링

false일 경우 랜더링 하지 않음

template와 v-else 지원

 

v-for

배열이나 객체의 반복에 사용

v-for="요소변수 in 배열" or "(요소변수,인덱스) in 배열"

template

여러 개의 태그들을 묶어서 처리해야 할 경우 template 사용

v-if,v-for,component등과 함께 많이 사용

 

v-cloak

Vue Instance가 준비될 때까지 mustache 바인딩을 숨기는데 사용

[v-cloak]{ display:none} 과 같은 css규칙과 함께 사용

Vue Instance가 준비되면 v-cloak 삭제