Directive

HTML 태그 안에 들어가는 속성(property)의 역할을 하며, v-라는 접두사가 붙는 것이 특징이다.

v-bind

앞에서 data 안의 변수 title 에 접근시 {{ }} 를 통해 접근한다고 배웠다.
그런데 이렇게 문자열을 출력하는 간단한 경우가 아닌,
HTML 속성에서 사용하고 싶은 경우엔 어떻게 해야할까?

이럴땐 {{ }} 가 아닌 v-bind 라는 directive 를 사용한다 !

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
  <a v-bind:href="link">링크</a>
</div>

예를들어 이렇게 태그 내에 href="링크주소" 속성이 있어야하는 곳에 v-bind 라는 디렉티브를 넣어서 쓸 수 있다.

v-once

v-once 역시 앞에서 배운 v-bind 처럼 HTML 의 속성값처럼 동작한다.

그러나 v-once 은 HTML코드로 출력이 된 이후에 어떤 후처리가 있더라도 처음에 출력한 값을 유지시킬 때 사용된다.

v-on

이벤트와 관련한 directive 중 가장 많이 사용된다고 할 수있다.
v-on은 이벤트 리스너의 역할을 한다.

v-on 의 구조

v-on:이벤트이름=”method 이름”

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  {{ number }} <!-- 주사위 숫자 -->
  <button v-on:click="rollDice">주사위 던지기</button>
</div>

예를들어 이렇게 클릭이라는 이벤트 발생 시 rollDice 를 구현할 때 바로 v-on 을 사용합니다.

v-on 에 사용되는 다양한 events

v-on:click 에서 click 대신 다양한 이벤트들이 사용될 수 있습니다.
이벤트명 | 설명
--- | ---
click | 마우스를 클릭했을 때 실행함
dblclick | 마우스를 더블 클릭했을 때 실행함
mouseover | 마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout | 마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove | 마우스의 포인트가 이동했을 때 실행함
mousedown | 마우스의 버튼을 눌렀을 때 실행함
mouseup | 마우스의 버튼을 놓았을 때 실행함
keydown | 키보드의 키를 눌렀을 때 실행함
keyup | 키보드의 키를 놓았을 때 실행함
keypress | 키보드의 키를 눌렀다가 놓았을 때 실행함
change | 요소가 변경될 때 실행함
submit | <Form>이 제출될 때 실행함
reset | <Form>이 재설정될 때 실행함
select | <select>의 값이 선택되었을 때 실행함
focus | 태그에 포커스가 있을 때 실행함
blur | 태그에 포커스를 잃었을 때 실행함