Vuejs - Event

Vue event

V-on directive (@)

• Dom Event를 청취하기 위해 v-on directive 사용
• inline event handling
• method를 이용한 event handling

<div id="app">
    <button v-on:click="counter += 1">클릭</button>
	<p>위 버튼을 클릭한 횟수는 {{counter}} 번 입니다.</p>
    <button v-on:click="increase">클릭</button>
	<p>위 버튼을 클릭한 횟수는 {{counter}} 번 입니다.</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0,
    },
  	methods:{
  	  increase:function(event){
  		this.counter++;
  	  }
    }
  });
</script>

이벤트 수식어(Event Modifier)

• event.preventDefault();처럼 method내에서 작업을 할 수도 있지만 method는 DOM의 이벤트를 처리하는 것 보다 data 처리를 위한 로직만 작업하는 것이 좋다.
• 이 문제를 해결하기 위해 Vue는 v-on이벤트에 이벤트 수식어를 제공한다. 수식어는 점으로 표시된 접미사이다.

<!-- 클릭 이벤트 전파가 중단된다. -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않는다. -->
<form v-on:submit.prevent="onSubmit"></form>

키 수식어(Key Modifier)

• Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있다.

<!-- Key가 Enter일때만 submit 동작 -->
<input v-on:keyup.enter="submit">

Key Code
.enter (.13)
.tab
.delete ("Delete"와 "Backspace" 키 모두 캡쳐)
.esc
.space
.up
.down
.left
.right

ref, $refs (비권장)

• DOM 접근을 위한 속성

<input type="text" v-model="id" ref="id">
...
<script>
	console.log(this.$refs.id.value);
<script>

CSS binding

• element의 class와 style을 변경
• v-bind : class 조건에 따라 class를 적용할 수 있다.

<style>
	.active {
  		background: rgb(100, 140, 230);
  		color: white;
  	}
</style>
<div id="app">
<div v-bind:class="{active: isActive}">
  	Vue CSS 적용
</div>
</div>

<script>
  new Vue({
  	el: "#app",
  	data : {
  		isActive: false,
  	},
  });
</script>

Form Input Binding

• v-model directive를 사용하여 폼 input과 textarea element에 양방향 데이터 바인딩을 생성할 수 있다.
• text/textarea태그 - value속성과 input이벤트
• checkbox, radio button - checked 속성과 change 이벤트
• select 태그는 value를 prop으로, change를 이벤트로 사용한다.