코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 3일차

3장 뷰 기본 문법 익히기

3.4 이벤트 다루기

v-on 디렉티브와 methods 옵션 속성으로 이벤트 연결하기

<script>
export default {
  methods: {
    clickHandler() {
      alert('click');
    },
    onKeyupHandler(e) {
      if (e.keyCode == 13) {
        console.log('Enter!');
      }
    },
  },
}
</script>

<template>
  <button type="button" @click="clickHandler">클릭</button>
  <input type="text" @keyup="($event) => onKeyupHandler($event)" />
</template>
<style></style>

v-on: 대신에 @를 사용하여 v-on:click을 @click으로 간단하게 작성할 수 있다.

반응성 시스템을 사용해 데이터 변화를 감지하고 업데이트하는 기능을 구현할 수 있다.

<script>
  export default {
    data() {
      return {
        number: 0,
      };
    },
    methods: {
      increasement() {
        this.number++;
      },
    },
  }
</script>

<template>
  <h1>{{ number }}</h1>
  <button type="button" @click="increasement">증가</button>
</template>

<style></style>

data()를 통해서 number 변수를 0으로 정의하고, methods에 증가 함수를 만들어 v-on:click 으로 이벤트를 연결.

3.5 폼 다루기

v-model 디렉티브로 폼 요소 다루기

한 줄 입력 요소의 값 가져오기, 여러 줄 입력 요소의 값 가져오기, 체크박스, 라디오 버튼, 콤보박스 요소

<script>
export default {
  data() {
    return {
      uid: '',
      upw: '',
    };
  },
  methods: {
    login() {
      console.log('id: ${this.uid)}');
      console.log('pw: ${this.upw}');
    },
  },
}
</script>

<template>
  <form id="loginForm">
    <label for="uid">아이디: <input type="text" id="uid" v-model="uid" /></label>
    <label for="upw">비밀번호: <input type="password" id="upw" v-model="upw" /></label>
    <button type="button" @click="login">로그인</button>
  </form>
</template>

<style></style>

이벤트 다루기와 폼 다루기를 통해서 기본적인 뷰 문법에 조금씩 이해할 수 있었다.