본문 바로가기
Frontend/Vue

Vue.js 강의 - Simple To Do App 개발하기

by 훈즈 플로거 2020. 5. 19.

Simple To Do App 개발하기

https://codesandbox.io/s/o29j95wx9

  • index.html
  • index.js
  • App.vue
  • variables.scss

SCSS는 SASS(https://ko.wikipedia.org/wiki/Sass_(스타일시트_언어)) 세번째 버전에서 추가되엇습니다. SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다. scss를 공통적으로 활용하고자 할때 이런식으로 import 하여 진행할 수 있음

  • TodoList.vue
  • TodoListItem.vue
  • BaseInputText.vue

컴포넌트에서 v-model

<input v-model="value" />

위 문장은 아래와 같습니다.

<input type="text" class="input" :value="value" v-on="listeners" />

컴포넌트에서는 v-model 을 쓸 수 없고 v-bind:value 와 v-on 을 이용해서 코딩을 해야 합니다.

https://kr.vuejs.org/v2/guide/components.html#사용자-정의-이벤트를-사용하여-폼-입력-컴포넌트-만들기

$event.target.value 에서 $event 는

https://www.w3schools.com/jsref/obj_event.asp

MouseEvent and KeyboardEvent 같은 모든 event objects

target 은 이벤트를 트리거 한 요소를 반환(Returns the element that triggered the event) 합니다.

사용자가 입력시 something 에 $event.target.value 를 념겨준다.

좀 더 자세한 내용은 가이드 문서를 참고하시면 되겠습니다.

<BaseInputText v-model="newTodoText" placeholder="New todo" @keydown.enter="addTodo" />

@keydown.enter 는 v-on:keydown.enter 입니다. 1부 기본강좌의 이벤트 핸들링 부분에서 공부를 했었습니다. 그래서, enter 키를 누르면, addTodo 메소드가 실행이 됩니다.

<input type="text" class="input" :value="value" v-on="listeners" />

에서 v-on="listeners" 에 대한 자세한 설명은

공식 가이드 문서의 네이티브 이벤트를 컴포넌트에 바인딩 하기에서 하고 있습니다.

https://kr.vuejs.org/v2/guide/components-custom-events.html#네이티브-이벤트를-컴포넌트에-바인딩-하기

computed: {
    listeners() {
      return {
        // Pass all component listeners directly to input
        ...this.$listeners,
        // Override input listener to work with v-model
        input: event => this.$emit("input", event.target.value)
      }
    }
  }

event => this.$emit("input", event.target.value) arrow 함수를 es5 형태로 다시 풀어쓰면

computed: {
    listeners() {
      var vm = this;
      return Object.assign({
        // Pass all component listeners directly to input
        // ... Spread syntax
        ...this.$listeners,
        // Override input listener to work with v-model
        input: function(event) {
          vm.$emit("input", event.target.value);
        }
      });
    }
  }

Object.assign()이나 _.extend()를 사용해 기존의 객체에 새 속성을 할당할 수 있습니다. 이 경우 두 객체의 속성을 사용해 새 객체를 만들어야 합니다.

 

 

bit.ly/2LMzjNC

 

[인프런 인강] 선착순 100명 50% 할인쿠폰! - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법

인프런 인터넷 강의 선착순 100명 50% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 678-ee6aa5185caa 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 6월..

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

댓글0