더북(TheBook)

3.5.3 폼 요소와 이벤트

3.4.1절에서 배운 것처럼 뷰에서 이벤트는 v-on 디렉티브로 연결할 수 있습니다. 그중 폼 관련 요소와 밀접한 이벤트 타입 몇 가지를 살펴보겠습니다.

 

input 이벤트

input 이벤트는 입력 요소의 값이 변경될 때 발생하는 이벤트입니다. input 이벤트를 사용하면 입력 요소의 값이 바뀌는 것을 실시간으로 확인할 수 있습니다. 앞에서 살펴봤듯이 v-model 디렉티브는 한글, 한자처럼 IME가 필요한 문자는 값이 한 글자씩 늦게 인식되는 문제가 있습니다. 이 문제는 input 이벤트를 사용해 해결할 수 있습니다.

input/src/App.vue

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    onChangeHandler($event) {
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.