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

4장 실습: 계산기 만들기

4.1 실습 내용 소개

  사용자 인터페이스에 표시된 숫자를 클릭하면 간단한 사칙연산을 하는 계신기 어플리케이션

4.2 뷰 애플리케이션의 기본 구조 설정하기

4.3 계산기의 UI 구성하기

html 코드의 body 부분은 <template> 부분으로

css 코드는 <style> 부분으로

4.4 데이터 바인딩하고 이벤트 연결하기

4가지 데이터 정의

• output(출력칸에 표시되어 사용자에게 노출되는 값),
• prev(이전에 입력된 값 또는 연산 결과),
• cur(현재 입력된 값),
• operator(연산자)

export default {
  data() {
    return {
      output: null,  // 출력칸에 표시되어 사용자에게 노출되는 값
      prev: null,    // 이전에 입력된 값 또는 연산 결과
      cur: null,     // 현재 입력된 값
      operator: null,// 연산자
    };
  },
}

v-model 디렉티브를 사용해서 output 데이터를 양방향으로 바인딩

<input v-model="output" type="text" name="output" readonly />

v-on 디렉티브(@)를 사용해서 나머지 버튼을 이벤트 연결

<input type="button" class="clear" value="C" @click="operation" />
// 나마지 버튼

4.5 계산기 로직 구현하기

클릭한 버튼 값 가져오기

입력한 값 노출하기

 methods: {
    operation(e) {
      const n = e.currentTarget.value;
      this.cur = this.cur === null ? n : (this.cur += n)
      this.output = this.cur
      // console.log(n);  //개발자도구에서 값 확인용
    },
  },

연산 로직 구현하기

초기화 함수, 계산 함수, 입력 함수를 분리하여 가독성을 높임.

methods: {
  clear() { 초기화 },
  calculate(n) { 연산 수행 },
  userInput(n) { 사용자가 입력한 숫자를 저장 },
  operation(e) {
    클릭한 버튼 값 가져오기;
    if (n === 'C') {
      this.clear();
    } else if ( 연산자를 포함한다면 ) {
      this.calculate(n);
    } else {
      this.userInput(n);
    }
  },
},

완전한 코드를 원한다면 길벗 깃허브를 참조하세요.

https://github.com/gilbutITbook/080384.git

GitHub - gilbutITbook/080384: <코딩 자율학습 Vue.js 프런트엔드 개발 입문> 소스 코드 저장소입니다.