시작하기
웹페이지에서 하는 모든 동작이 모두 이벤트이다. 마우스를 움직이면 mousemove 이벤트 이고 키보드를 누르면 keypress 이벤트이고 클릭을 하면 click 이벤트이다.
사용하기
예제로 페이지에 보여지는 숫자를 증가시키고 감소시키는 카운터를 만들어 볼 것이다. 먼저 click 이벤트 발생 시 어떤 작업을 할 지 함수를 준비해주어야 한다. 이 함수는 Vue 인스턴스 내부에 위치하는데 이를 메소드라고 부른다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h1>카운터 : {{number}}</h1>
<button v-on:click="increase">증가</button>
<button v-on:click="decrease">감소</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>var app = new Vue({
el: "#app",
data: {
number : 0
},
methods:{
increase : function(){
this.number++;
},
decrease : function(){
this.number--;
}
}
});위 코드를 작성하면 증가버튼을 누르면 카운터의 숫자가 증가하고 감소버튼을 누르면 카운터의 숫자가 감소한다.
v-on을@으로 대체가능!!!! (@:click)
마무리
이로써 vue의 핵심 기능 중 하나인 디렉티브를 모두 조금씩 다뤄봤다.
이를 응용하여 무엇이든 할 수 있을 것이다.
