[Hoon] Vuejs 강의 - Simple To Do App 개발하기

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/3fXOzon

인프런 인강 선착순 30% 마지막 할인 쿠폰 - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런