디렉티브 태그

뜻을 직역하면 지시문이라고 할 수 있다. 엘리먼트에게 '이렇게 동작해라' 하고 지시를 해주는 문법이라고 생각하면 된다.

v-text

innerText, {{ }}와 동일한 기능을 수행한다. 지정해준 문자열을 그대로 나타내준다.

<p v-text="hello!"></p> // hello!

v-html

HTML은 기본적으로 텍스트 형태로만 렌더링 되게 해주기 때문에 태그를 막고 XSS을 차단해준다.

XSS

사이트 간 스크립팅은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로, 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점

그런데 가끔 html을 렌더링해야 할 때가 있다. 그럴 때 사용하는 태그로, innerHTML과 동일한 기능을 수행하며 html 태그를 파싱하여 화면에 나타내준다.
** v-html 을 사용하는 경우, 서버측에서 불필요한 부분은 필터링 하게 해야 한다. 잘못하면 XSS나 불필요한 악성태그가 렌더링 될 수 있다.

v-show

css의 display와 동일한 기능을 한다. 해당 엘리먼트를 화면에 나타낼지 말지 true, false 값으로 지정할 수 있다.

v-if / v-else-if / v-else

if, else if, else 조건문을 구현한다.
v-if 는 v-show 와 다르게 엘리먼트를 아예 삭제시키고 다시 렌더링한다. 만약 상태변경이 자주 일어나면 v-if보다 v-show를 사용하는 게 좋다.

v-for

for 반복문을 구현한다.

v-for = "(item, index) in items"

items는 데이터 배열의 이름으로 사용자에 따라 바뀔 수 있다. 각 아이템을 item으로, 배열의 현재 index를 index로 받아 반환해 준다. v-bind:key 와 같이 사용하는 것을 원칙으로 하며, 고유한 키 값이 있다면 그 키 값으로 등록 해주거나 키 값이 없다면 index를 등록하면 된다.

v-bind

HTML 태그의 속성에 vue 인스턴스의 데이터를 바인딩 해준다.
v-bind:태그속성="데이터명" or
:태그속성="데이터명" (축약문법)

<input type="text" v-bind:value="message">
// input 태그의 value 속성에
// vue 인스턴스에서 정의한 데이터 message를 바인딩한다.

v-on

해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결하는, 즉 이벤트 리스너의 역할을 한다.

v-on:이벤트명="메소드명" or
@이벤트명="메소드명" (축약문법)

지정해준 이벤트를 듣고 지정해준 메소드를 실행시킨다.

<button v-on:click="rollDice">
// 버튼 클릭 시, rollDice 메소드 실행

v-model

v-bind와 v-on 기능의 조합으로 동작한다. 매번 사용자가 v-bind와 v-on 속성을 다 지정해 주지 않아도 좀 더 편하게 개발할 수 있도록 합쳐져서 만들어진 문법이다. input, checkbox, selectbox, textarea 와 같은 태그에서 value 값을 실시간으로 전달해준다.

<input v-model="message">
<p>메시지: {{ message }}</p>
// input에 입력받는 내용이 실시간으로 표현된다.

v-model은 HTML 입력 요소의 종류에 따라 서로 다른 속성과 이벤트를 사용한다.

• input, textarea: value 속성과 input 이벤트
• checkbox: checked 속성과 change 이벤트
• select: value 속성과 change 이벤트

v-pre

v-pre를 사용한 해당 태그와 자식 태그들은 vue를 사용하지 않는다고 알려주는 태그이다. 즉, 컴파일 과정에서 vue가 그냥 건너뛰게 되어 그만큼 컴파일 속도가 향상된다.

v-once

컴포넌트를 처음 한번만 렌더링한다. 데이터가 변경되어도 그냥 초기값만 보여준다. 자바스크립트에서 사용하는 데이터를 사용하지만 변동이 없는 정적인 부분을 보여줄 때 사용한다.

v-cloak

vue가 처리할 내용이 많고 복잡할 경우, 렌더링이 느려지고 컴파일되지 않은 값이 일시적으로 표현되는 경우가 있다. 이 현상을 방지하고자 사용한다. 이 디렉티브는 css와 함께 동작하며 컴파일이 끝나면 v-cloak 속성은 자동으로 삭제된다.

/* .css */

[v-cloack] {
  display: none;
}

<div v-cloak>{{ message }}</div>
// 컴파일 다 될 때까지 message를 숨길 수 있다.
// 컴파일이 끝나면 v-cloak 속성은 사라지고 message가 보이게된다.