beomy

컴포넌트에서 $route를 사용하게 되면, 컴포넌트가 URL에 의족적이게 되어 재사용성이 떨어지게 됩니다. 이 의존성을 제거하기 위해서는 props 옵션을 사용하면 됩니다, const User = { template: 'User {{ $route.params.id }}' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) 위의 코드는 $route를 사용한 예제입니다. URL에 의존적이기 때문에 다른 URL를 가지는 컴포넌트에서 재사용하기 어렵습니다. const User = { props: ['id'], template: 'User {{ id }}' } const router = new VueRouter..

1. prop 표기법 (camelCase VS kebab-case) HTML 속성은 대소문자를 구별하지 않습니다. 모든 대문자를 소문자로 인식합니다. Vue에서 HTML을 표현 할 때 보통 kebal-case로 표현하고, JavaScript에서 prop를 받아 사용할 때는 camelCase를 사용합니다. HTML에서는 kebal-case(post-title)를 사용합니다. Vue.component('blog-post', { // camelCase in JavaScript props: ['postTitle'], template: '{{ postTitle }}' })JavaScript에서는 camelCase(postTitle)를 사용합니다. 2. prop 타입 pr..

이번 포스트에서는 SPA에서 가장 중요하다 이야기 되는 컴포넌트에 관해 이야기 할 것입니다. 1. 기본 예제 // Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.' });위의 예제는 라는 이름으로 재사용이 가능한 컴포넌트입니다. Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me..

Vue.JS 공식 문서를 따르면, Vue는 엄격하게 MVVM 패턴과 관계되어 있지 않지만, MVVM 패턴에 영감을 받았다고 합니다.([디자인패턴] MVC, MVP, MVVM 비교 참고) MVVM 패턴의 특징 중 하나가 데이터 바인딩입니다. Model이 업데이트 되면, 데이터 바인딩으로 인해 View가 업데이트 됩니다. Vue 인스턴스 만들기 Vue 어플리케이션을 만드는 것은 Vue 인스턴스를 만드는 것에서 시작됩니다. Vue 어플리케이션의 구조는 루트 Vue 인스턴트 밑에 하위 컴포넌트가 붙는 컴포넌트 트리 구조입니다. Root Instance └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ Cle..

Components와 Props Component는 UI를 독립적(independent)하게 나누는 단위입니다. Component는 독립적이고, 재사용 가능해야 합니다. Component는 JavaScript에서 함수, Props는 함수의 인자값으로 생각 할 수 있습니다. 함수는 인자 값으로 어떠한 값을 만들어 내고, Component는 Props로 어떠한 UI를 만들어 냅니다. Component 종류Component를 만들어 내는 방법은 function을 이용하는 방법과 ES6에서 추가된 class를 이용하는 방법 2가지가 있습니다. Function ComponentComponent를 표현하는 가장 간단한 방법입니다. function Welcome(props) { return Hello, {props...