우리가 웹페이지에서 하는 모든 동작, 그것이 바로 이벤트다. 마우스를 움직이면, mousemove 이벤트고 키보드를 누르면 keypress 이벤트 클릭을 하면 click 이벤트다, 이렇게, 웹에서 사용될 수 있는 이벤트들의 목록은 w3school 에서 모두 참조할 수 있다.
이번에도 JSBin(https://jsbin.com/fivomus/1/edit?html,js,output)을 사용하던 본인의 서버를 사용하던 자유다
카운터를 만들기 위해선, 버튼의 click 이벤트 발생 시 우리가 준비한 작업을 하도록 설정을 해야한다. 그러기 위해선 이벤트가 발생 했을 때 어떤 작업을 할 지, 함수를 준비해야한다. 이 함수는 우리의 뷰 인스턴스 내부에 위치해있는데, Vue 객체와 관계가 있으므로, 이를 메소드 (method) 라고 부른다.
메소드를 준비할때는, 우리가 뷰 인스턴스에서 사용 할 데이터들을 data 안에 넣은 것 처럼, 함수들을 만들어서 뷰 인스턴스의 methods 안에 넣으면 된다.
이제, 데이터 모델에 number 라는 변수를 만들고, 값을 증가시키는 increment, 감소시키는 decrement 메소드들을 준비한다.
var app = new Vue({
el: '#app',
data: {
number: 0
},
// app 뷰 인스턴스를 위한 메소드들
methods: {
increment: function() {
// 인스턴스 내부의 데이터모델에 접근 할 땐,
// this 를 사용한다
this.number++;
},
decrement: function() {
this.number--;
}
}
});메소드 내에서 인스턴스 내부의 데이터 모델에 접근 할 때에는 this 키워드를 사용합니다.
HTML 에서 number 값을 보여주고, 버튼 두개도 만들어주자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1>카운터: {{ number }}</h1>
<button>증가</button>
<button>감소</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
아직까지는 버튼을 눌러도 아무 반응이 없다
v-on 디렉티브를 이벤트를 처리 할 태그(들) 에 설정 하면 된다. 이번엔 button 태그에 넣어주면 된다
이 디렉티브를 설정 할 때는 다음과 같은 형식으로 한다.
v-on:이벤트이름="메소드이름"
우리가 이번에 처리 할 이벤트 이름은 click 이고, 메소드 이름은 increment 혹은 decrement 가 되겠다.
그럼, 코드를 작성해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1>카운터: {{ number }}</h1>
<button v-on:click="increment">증가</button>
<button v-on:click="decrement">감소</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Vue 를 사용하면 자바스크립트를 그렇게 많이 입력하지 않아도, 이렇게 쉽게 구현 할 수 있다.
위 코드를 조금더 편하게 작성 할 수 있는 방법이 존재한다. 바로, v-on: 을 @ 로 대체하는 것 이다.
<div id="app">
<h1>카운터: {{ number }}</h1>
<button @click="increment">증가</button>
<button @click="decrement">감소</button>
</div>이렇게 Vue.js 의 핵심 기능 중 하나인 디렉티브를 모두 조금씩 다뤄봤다.
'Vue JS' 카테고리의 다른 글
| 7.Directive(지시문) v-model 양 방향 데이터 바인딩 (0) | 2020.04.11 |
|---|---|
| 6.Directive(지시문): v-for (0) | 2020.04.04 |
| 5.Directive (지시문): v-bind, 엘리먼트 속성 동적설정 (0) | 2020.03.28 |
| 4.Vue JS 환경 설정하기 (0) | 2020.03.21 |
| 3.Directive(지시문) Vue엘리먼트를 위한 속성-2 (0) | 2020.03.15 |
WRITTEN BY
