티스토리 뷰
1. 이벤트 핸들링
조건부 렌더링과 리스트 렌더링을 통해 Vue.Js 렌더링 과정에서 조건문을 어떻게 활용할 것인지와 반복되는 리스트 형태의 테크 노출을 어떻게 구현하는지 알 수 있었다. 이를 활용하기 위해서 라디오 버튼이나 리스트 박스에 렌더링을 할 수 있도록 조건을 걸어서 이에 맞게 동작하는 웹사이트를 구현해보았다.
하지만 사용자들의 요구는 여기서 멈추지 않습니다.
특수한 버튼(혹은 컴포넌트)를 눌렀을 때 특정 동작을 직접 지시 할 수 있도록 원합니다. 예를 들어 버튼 하나를 눌렀을 때 웹 사이트에서 무언가 변화가 일어나고 싶어 합니다.
위에 홈페이지에는 두개의 버튼이 존재한다. Plus를 누르게 되면 Number가 1이 증가하고, Minus를 누르면 1이 감소하게 된다. 버튼을 누를 때 Number 라는 변수의 값을 변화 시킬 수 있는 메소드가 추가되어야 한다.
1) Vue 변수 선언
가장 먼저 Number라는 변수를 Vue Instance를 추가한다.
1 2 3 4 5 6 7 8 9 | var app = new Vue({ el: '#instance', data () { return { Number: 0 } } }) | cs |
2) 버튼에 이벤트 리스너 추가
버튼에 클릭을 하는 경우 어떤 동작을 하는지를 정의해주면 된다. 리스너의 경우 HTML의 버튼이 알 수 있도록 해당 태그의 속성으로 선언해주면 된다.
1 2 | <button v-on:click="Number += 1">Plus</button> <button v-on:click="Number -= 1">Minus</button><br> | cs |
v-on:click = <메소드 정의>
Plus 버튼은 Number의 값을 1 더해주고, Minus 버튼은 값을 1 감소시켜주도록 아래와 같이 선언한다.
3) 메소드 만들기
하지만 이는 좋은 코딩 방식은 아니다. 왜나면 MVC 모델 위반이다. 지금이야 편의를 위해 하나의 파일로 Vue 인스턴스와 HTML 코드를 합쳐서 표시하고 있지만 실제 프로젝트에서는 둘을 분리하게 된다.
따라서, HTML의 속성 (v-on:cilck) 에는 메소드 명이 들어가야 하고, Vue 인스턴스에 정의된 메소드가 들어가야 한다.
1 2 3 4 5 6 7 8 | methods: { Plus: function(){ this.Number += 1 }, Minus: function(){ this.Number -= 1 } } | cs |
Number의 숫자를 바꿔 주는 2개의 메소드 Plus와 Minus를 위와 같이 선언해준다.
4) 리스너에 메소드 선언
이제 위에서 만든 리스너에 Vue Instance에서 선언한 메소드를 추가시켜주기만 하면 이벤트 핸들링을 위한 작업이 끝난다.
1 2 3 4 | <button v-on:click="Plus()">Plus</button> <button v-on:click="Minus()">Minus</button><br> <p>Number : {{Number}}</p> | cs |
이 4가지 작업으로 이벤트 핸들링을 구성할 수 있다.
2. 키보드 이벤트
웹 페이지에서 사용자가 버튼과 같은 객체를 입력할 떄 가장 많이 입력하는 방식이 마우스 일 것이고 위의 방법이 마우스로 클릭했을 때 사용하는 방식이다. v-on:click이 바로 이 방법을 등록하는 것이다.
그렇다면 두번째로 많이 사용하는 방식은 키보드 일 것이다. Enter, delete와 같은 키를 입력해서 이벤트를 등록 할 수 있다.
1 | <input v-on:keyup="Plus()"></input> | cs |
Keyup을 통해 키보드 이벤트를 등록 할 수 있다. 만약 각각의 키보드 키에 따라 기능을 추가하기 위해서는 아래와 같이 keyup 키워드 뒤에 버튼에 대한 정의를 내려 준다.
1 | <input v-on:keyup.up="Plus()" v-on:keyup.down="Minus()"></input> | cs |
인풋 필드에 마우스 커서를 놓은 후 키보드 UP 버튼을 누르게 되면 숫자가 1 증가하고, DOWN 버튼을 누르면 1 감소하게 된다.
다음은 자주 사용하게 되는 키보드 이벤트들이다.
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
1 2 | <button @click="Plus()">Plus</button> <button @click="Minus()">Minus</button><br> | cs |
3. 예시 웹사이트
이번 웹 사이트는 NBA에서 올스타전을 하기 위해서 한 팀의 선수들을 대상으로 사용자들의 투표를 받는 사이트이다. 만약 실제로 구현하게 된다면 한 사용자가 가지고 있는 투표권이 수 만큼 투표해야 하고 이를 검증하기 위해 로그인 기능을 만들어야 한다. 그리고 사용자들이 실시간으로 투표를 하는 결과를 반영해줘야 한다.
하지만 이번엔 이벤트 핸들링 기능을 설명하기 위해 최대한 간략한 구조로 만들었다.
필라델피아 세븐티식서스 5명에 대해 맘껏 눌러서 투표할 수 있는 웹 사이트 이다. 이 중 한명의 선수에 대한 이벤트 핸들러는 다음과 같이 작성될 것이다.
<HTML>
1 2 | <img v-bind:src="simmons_img" width="300px" height="200px"></img><br> <button @click="Ben++" style="height:50px">Ben Simmons</button><div> Vote : {{Ben}}</div><br> | cs |
<Vue Instance>
1 2 3 | data: { Ben: 0, }, | cs |
이 구조로 총 다섯명에 대한 태그와 인스턴스를 모두 만들어주자.
- 웹 사이트 주소
'Skill > Programming - Server & Client' 카테고리의 다른 글
| 10.[Vue.js] 컴포넌트(Components) (0) | 2020.01.05 |
|---|---|
| 9.[Vue.js] 클래스, 스타일 바인딩 (0) | 2019.12.31 |
| 7.[Vue.js] 조건부 렌더링, 리스트 렌더링 (0) | 2019.12.15 |
| 6.[Vue.js] method, computed, watch (0) | 2019.12.07 |
| 5. [Vue.js] 데이터 바인딩 응용 (0) | 2019.12.01 |