1. Named Routes vue-router를 사용할 때, 이름이 있는 라우트를 사용하는 것이 더 편리할 때가 있습니다. const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) 위의 코드와 같이 라우트를 설정하였다면, User 혹은, router.push({ name: 'user', params: { userId: 123 }}) 를 이용하여 라우터를 변경 할 수 있습니다. 위의 두가지 모두 /user/123으로 경로를 이동합니다. 2. Named Views 여러개의 view를 중첩하지 않고 동시에 표시해야 할 경우, 이름을 갖는 v..
를 사용하여 선언적 네이게이션용 앵커(anchor) 태그를 만드는 것 외에도 vue-router의 인스턴스 메소드를 사용하여 프로그래밍으로 네비게이션을 수행할 수 있습니다. 1. router.push(location, onComplete?, onAbort?) Vue 인스턴스 내부의 $router를 사용하여 this.$router.push와 같이 사용할 수도 있습니다. router.push는 다른 URL로 이동할 때 사용됩니다. 이 메소드는 새로운 URL을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL로 이동하게 됩니다. 를 클릭하면 router.push(...)를 호출하는 것과 같습니다. 전달 인자 전달인자는 문자열 또는 객체가 될 수 있습니다. // 리터럴 str..
실제 앱 UI는 일반적으로 여러 단계의 중첩 된 컴포넌트로 이루어져 있습니다. URL의 세그먼트(/로 구분 되는 각각의 문자열)는 중첩된 컴포넌트의 특정 구조와 일치하는 경우가 매우 많습니다. 예를 들면, /user/foo/profile /user/foo/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+ vue-ro..
패턴을 가진 라우트를 동일한 컴포넌트에 매칭시켜야 할 경우가 종종 있습니다. 예를 들면, User 컴포넌트가 있고, /user/1 혹은 /user/2와 같은 라우트에 접근할 때, 라우트에 매칭된 ID에 해당하는 유저 정보를 User 컴포넌트에 나타내야 한다면, const User = { template: 'User' } const router = new VueRouter({ routes: [ // 동적 세그먼트는 콜론으로 시작합니다. { path: '/user/:id', component: User } ] }) 위의 코드와 같이 vue-router 설정을 할 수 있습니다. /user/1와 /user/2는 모두 동일한 컴포넌트에 매칭됩니다. 동적 세그먼트는 콜론(:)으로 표시됩니다. 동적 세그먼크 값은 모..
vue-router는 Vue.JS의 공식 라우터입니다. vue-router를 사용하면 싱글 페이지 어플리케이션을 쉽게 만들 수 있습니다. 이번 포스트에서는 vue-router를 프로젝트에 추가할 때 HTML단과 JavaScript단에서 추가하는 방법에 대해 이야기 할 것입니다. 1. HTML Hello App! Go to Foo Go to Bar 는 현재 라우트와 일치할 때 자동으로 .router-link-active 클래스가 추가됩니다. 2. JavaScript // 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 하세요 // 그리고 `Vue.use(VueRouter)`를 호출하세요 // 1. 라우트 컴포넌트를 정의하세요. // 아래 내용들은 다른 파일..
Vue의 가장 두드러지는 특징 중 하나는 눈에 띄지 않는 반응형 시스템입니다. 모델은 단순한 JavaScript 객체입니다. 모델이 수정되면 화면이 갱신됩니다. 이번 포스트에서 이러한 반응형 시스템을 좀 더 자세히 알아보려고 합니다. 1. MVVM 패턴 Vue는 MVVM 패턴에 영감을 받은 프레임워크입니다. 위의 그림은 MVVM 패턴을 나타내는 그림입니다. 더 자세한 설명은 [디자인패턴] MVC, MVP, MVVM 비교를 참고 바랍니다. View는 DOM, View Model은 Vue, Model은 단순한 JavaScript 객체 입니다. View Model은 View와 데이터 바인딩되어 View Model이 변경 되 었을 때 View가 업데이트 됩니다. 2. 변경 내용을 추적하는 방법 Vue 인스턴스에..
1. 필터 사용방법 Vue는 텍스트 형식화 할 수 있는 필터 기능을 제공합니다. 필터는 중괄호 보간법, v-bind 표현법(2.1.0+ 부터)에서 사용 할 수 있습니다. 필터는 JavaScript 표현식 마지막의 파이프(|) 기호와 함께 사용해야 합니다. {{ message | capitalize }} 2. 로컬 필터 정의 컴포넌트의 옵션으로 로컬 필터를 정의할 수 있습니다. filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }3. 전역 필터 정의 Vue 인스턴스 생성 전(new Vu..
플러그인은 일반적으로 전역으로 기능을 Vue에 추가합니다. 플러그인은 엄격하게 규정된 범위는 없으며, 여러 유형의 플러그인이 있습니다. 일부 전역 메소드또는 속성 추가 : vue-coustom-element 하나 이상의 전역 자산 추가 : 디렉티브 / 필터 / 트랜지션 등.. vue-touch 글로벌 mixin으로 일부 컴포넌트 옵션을 추가 : vue-router 일부 Vue 인스턴스 메소드를 Vue.prototype에 추가 자체 API를 제공하는 동시에 위의 일부 조합을 주입하는 라이브러리 : vue-router 1. 플러그인 사용하기 Vue.use() 전역 메소드를 호출하여 플러그인을 사용할 수 있습니다. // calls `MyPlugin.install(Vue)` Vue.use(MyPlugin) ne..
1. 기본 대부분의 경우 Vue는 템플릿을 사용하여 HTML을 작성하는 것을 권장합니다. 하지만 때로는 JavaScript를 사용하여 HTML을 작성을 해야 할 때가 있습니다. 이럴 때 render 함수를 사용하면 됩니다. Hello world! 위의 코드와 같이 작성된 HTML이 있을 때, Hello world!위의 코드와 같이 컴포넌트를 작성하여 사용할 수 있습니다. 이 때 level 속성으로 h 태그의 종류를 바꿀 수 있는 컴포넌트를 작성한다면, Vue.component('anchored-heading', { template: '#anchored-heading-template', props: { level: { type: Number, required: true } } ..
1. 시작 기본 디렉티브 (v-model, v-show 등..) 외에도 사용자가 직접 정의한 디렉티브를 등록 할 수 있습니다. 기본적으로 Vue 2.0의 코드 재사용 및 추상화의 기본 형식은 컴포넌트 입니다. 하지만 일반 엘리먼트의 DOM에 접근이 필요한 경우 사용자 정의 디렉티브가 유용하게 사용 될 수 있습니다. // 전역 사용자 정의 디렉티브 v-focus 등록 Vue.directive('focus', { // 바인딩 된 엘리먼트가 DOM에 삽입되었을 때... inserted: function (el) { // 엘리먼트에 포커스를 줍니다 el.focus() } })위의 코드는 페이지가 로드되면 해달 엘리먼트에 포커스를 주는 디렉티브 입니다. (참고, 모바일 사파리에서도는 동작하지 않습니..