Eddie's Blog

input 엘리먼트에 v-model을 사용하여 Vue 인스턴스의 데이터를 바인딩하면 입력한 내용에 대해 모델 바인딩 바로 되지만, v-bind를 사용했을 경우 그렇지 못하기 때문에 $event.target.value를 사용하여 값을 가져와 oninput 이벤트에 데이터 값을 변경해준다. v-model = v-bind:value + v-on:input 라고 이해하자.

Vue.componet에 Vue인스턴스의 이벤트를 바인딩 하고자 한다면, .native를 사용해 연결한다.

Vue.js 2.x의 공식 가이드를 살펴보면 Vue.component 의 이름을 케밥 케이스(kebab-case)를 사용하고 있는데, 가이드 문서 중에 아래와 안내 문구를 발견할 수 있다. Note that Vue does not enforce the W3C rules for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice. Vue는 W3C 규칙(모두 소문자와 하이픈만을 허용)을 강요하지 않습니다. 하지만 이런 규약이 좋은 습관이라고 생각합니다. 하지만, Vue.component의 이름을 카멜 케이스(camelCase: 원래 발음은 캐믈이라고 해..

Vue.component의 data는 함수형(function type)으로 객체(object)를 반환해서 사용해야 하고, Vue 인스턴스의 data는 객체(object)으로 사용한다.

1. logo.visible = true 인 경우 2. logo.visible = false 인 경우

뷰모델(View Model)은 데이터가 저장되어 있는 모델(Model)과 그 데이터를 화면에 표현하는 뷰(View)를 연결해준다. 뷰모델은 모델을 뷰로 전달해주며, 이 뷰모델이 Vue.js의 핵심이다.