[ Vue.js 2 프로그래밍 ]
(http://book.naver.com/bookdb/book_detail.nhn?bid=12320270)
5. 상호 작용
5.1 이벤트 처리
HTML 이벤트는 DOM엘리먼트에서 일어납니다. HTML 페이지에서 vue.js를 사용하면 vue.js가 이러한 이벤트에 반응(react) 합니다.
이벤트는 기본적인 사용자 상호작용에서 랜더링 모델에서 일어나는 일에 이르기까지 모든 것을 나타낼 수 있습니다.
HTML이벤트의 예
- 웹페이지가 완전히 로드됨
- 입력 폼이 변경됨
- 버튼이 클릭됨
- 폼이 제출됨
이벤트 처리의 핵심은 이벤트가 발생할 때마다 무언가를 할 수 있다는 것입니다. vue.js에서 DOM이벤트를 청취(listen)하려면 v-on 디렉티브를 사용하면 됩니다.
v-on 디렉티브를 이벤트 리스너를 엘리먼트에 붙입니다. 이벤트 유형은 이자로 표시하며 아래와 같이 사용할 수 있습니다.
1 | <button v-on:click="num++">더하기</button> |
5.1.1 인라인 이벤트 핸들링
[ 인라인 이벤트 핸들링 예제 ]
5.1.2 메서드를 이용한 이벤트 처리
5.1.1의 예제와 동일한 작업을 메서드를 이용해서 처리해보겠습니다. vue.js에서 메서드는 특정 작업을 수행하도록 설계된 코드 블록으로 메서드를 실행하려면 먼서 메서드(methods)를 정의한 다음 호출해야 합니다.
기능은 이전과 동일하지만 코드를 읽을 때 명확하며 이해하기 쉬워졌습니다.
5.1.3 v-on의 축약형
프로젝트에서 매번 v-on을 사용하고 있다면 html이 금방 지저분해질 것입니다. 고맙게도 v-on의 축약형인 @기호가 존재합니다. @은 v-on:을 대체하며 코드를 훨씬 깔끔하게 만들어 줄 것입니다.
[ v-on:click을 이용한 click이벤트 청취 ]1
2
3<button v-on:click="upvote">
upvote! {{upvotes}}
</button>
[ 축약형을 이용한 click이벤트 청취 ]1
2
3<button @click="upvote">
upvote! {{upvotes}}
</button>
5.2 이벤트 한정자
위 예제를 실행해보면 더하기 버튼을 클릭했을 때 계산을 수행하는 대신 페이지를 다시 로드합니다(jsfiddle에선 그렇게 되지 않지만) 이렇게 되는 이유는 버튼을 클릭하면 폼을 제출하고 페이지가 다시 로드되기 때문 입니다.
(예제에서의 button 엘리먼트의 type 속성이 submit이기 때문에 )
폼 제출을 막으려면 이벤트의 기본동작을 취소해야합니다.
[ preventDefault를 사용하여 기본 동작을 중지 ]
위와 같이 메서드 안에서 처리할 수도 있지만 vue.js에서는 이벤트에 대한 기본 동작을 방지하기 위해 v-on에 대해 4가지 이벤트 한정자를 제공합니다.
vue.js의 이벤트 한정자
- prevent
- stop
- capture
- self
[ 이벤트 한정자를 활용한 기본동작 중지 ]
5.3 키 한정자
입력 엘리먼트 중 하나에 포커스를 주고 엔터키를 누르면 버튼의 메서드가 호출되는 데 폼에 버튼이 없거나 버튼이 전혀 없는 경우에는 키보드 이벤트를 대신 청취할 수도 있습니다.
키보드 이벤트를 청취할 때는 키 코드를 확인해야할 때가 많습니다. 엔터 키의 코드는 13이고 엔터키 이벤트를 청취해야한다면 아래와 같이 사용할 수 있습니다.
1 | <input v-model="a" @keyup.13="add"> |
vue.js에서는 일반적으로 사용하는 키에 대해서 별칭을 제공하여 키코드를 외우지 않아도 편리하게 사용할 수 있게 해줍니다.
vue.js의 키 별칭
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
위의 예시를 키 별칭을 사용하여 변경한다면 아래와 같습니다.
1 | <input v-model="a" @keyup.enter="add"> |
폼에 입력 및 버튼등이 많고 기본 제출 동작을 방지해야 한다면 폼의 submit 이벤트를 수정해도 됩니다.
1 | <form @submit.prevent="calculator"> |
5.4 계산된 프로퍼티(computed properties)
vue.js의 인라인표현식은 매우 편리하지만 로직이 복잡해지면 계산된 프로퍼티(computed properties)를 사용해야 합니다.
계산된 프로퍼티란 다른 요인에 따라 값이 바뀌는 변수 입니다.
객체 프로퍼티로 사용할 수 있는 함수퍼럼 작동하는 데 큰 차이점은 계산된 프로퍼티가 의존하는 요소가 변경될 때마다 계산된 프로퍼티의 값은 다시 평가 된다는 것입니다.
계산된 프로퍼티는 vue인스턴스 안에 computed객체에 정의하여 사용할 수 있습니다.
[ computed 객체의 사용 예 ]
입력 받는 값이 반드시 숫자여야 하는 경우에는 속성 내부에 parseFloat등을 통해 값을 제어할 수도 있지만 vue에서는 더 편리하게 사용할 수 있도록 number한정자를 제공합니다.
1 | <input type="text" v-model.number="a" /> |
이 외에도 input의 type이 number인 경우에도 값을 숫자로 받을 수 있습니다.
[ 숫자를 입력받는 경우의 예 ]
연습문제
정리
이벤트처리
- HTML이벤트는 DOM엘리먼트에서 일어나며 vue.js를 사용하면 이러한 이벤트에 반응
- 이벤트는 기본적인 상호작용부터 랜더링모델에서 일어나는 일까지 모든 것을 나타낼 수 있음
- vue에서 이벤트를 청취는 v-on 디렉티브를 사용
메서드를 이용한 이벤트 처리
- 메서드를 이용하기 위해서는 methods를 정의한 다음에 호출 합니다.
- 메서드의 기능 및 구현에는 여러가지 방법으로 할 수 있지만 methods를 정의하여 사용하면 읽기 쉽고 명확해집니다.
메서드를 이용한 이벤트 처리
- 메서드를 이용하기 위해서는 methods를 정의한 다음에 호출 합니다.
v-on의 축약표현
- v-on 디렉티브는 기호 @를 통해 축약하여 표현할 수 있습니다
( v-on:click=”result” -> @click=”result” )
이벤트 한정자
- vue.js에서는 이벤트에 대한 기본동작을 방지하기 위해 4가지 이벤트 한정자를 제공
( prevent, stop, capture, self )
키(이벤트) 한정자
- vue.js에서는 키보드 이벤트에 대한 제어를 위해 두가지 방식의 한정자를 제공합니다.
- 키 코드번호를 통한 한정자 (EX> keyup.13=”add”)
- 키 별칭을 통한 한정자(상단 참고)
계산된 프로퍼티(computed properties)
- 계산된 프로퍼티란 다른 요인에 따라 값이 바뀌는 변수를 말함
- vue.js에서 제공하는 인라인 표현식은 매우 편리하지만 복잡하게 사용하면 관리가 어려워질 수 있음
- computed 객체를 통해 사용