본문 바로가기

분류 전체보기

(78)
computed와 watch 본 게시글은 아래의 글을 필사하였습니다. https://kr.vuejs.org/v2/guide/computed.html computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org computed 속성 템플리시 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 아래의 예를 봅시다. {{ messagesplit('').reverse().join('') }} 이 템플릿은 더 이상 간단하고 명료하지 안습니다. message 를 역순으로 표시한다는 것을 알려면 찬찬히 살펴봐야 하겠죠. 템플릿에 메시지를 역순으로 표시할 일이 더 있으면 문제는..
Vue 인스턴스 본 게시글은 아래의 글을 필사하였습니다. https://kr.vuejs.org/v2/guide/instance.html Vue 인스턴스 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue 인스턴스 만들기 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. var vm = new Vue({ // 옵션 }) 엄격히 MVVM패턴과 관련이 없지만 Vue 의 디자인은 부분적으로 그것에 영감에 받았습니다. 컨벤션으로, Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용합니다. Vue 인스턴스를 인스턴스화 할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프 사이클 콜백등의 옵션을 포함 할 수 있는 op..
상태 | Vuex 본 게시글은 아래의 글을 필사하였습니다. https://vuex.vuejs.org/kr/guide/state.html 상태 | Vuex 상태 단일 상태 트리 Vuex는 단일 상태 트리 를 사용합니다. 즉, 이 단일 객체는 모든 애플리케이션 수준의 상태를 포함하며 "원본 소스" 역할을 합니다. 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미합니다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있습니다. 단일 상태 트리는 모듈성과 충돌하지 않습니다. 나중에 상태와 변이를 하위 모듈로 분할하는 방법에 대 vuex.vuejs.org Vuex는 단일 상태 트리를 사용합니다. 즉, 이 단일 객체는 모든 애플리케이션 수준의 상..
시작하기 | Vuex 본 게시글은 아래의 글을 필사하였습니다. https://vuex.vuejs.org/kr/guide/ 시작하기 | Vuex 시작하기 모든 Vuex 애플리케이션의 중심에는 store 가 있습니다. "저장소"는 기본적으로 애플리케이션 상태 를 보유하고있는 컨테이너입니다. Vuex 저장소가 일반 전역 개체와 두 가지 다른 점이 있습니다. Vuex store는 반응형 입니다. Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트합니다. 저장소의 상태를 직접 변경할 수 없습니다. 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이 입 vuex.vuejs.org 모든 Vuex 애플리케이션의 중심에는 store가 있습니다. "저장소"는 기본적으로 애플리케이션 상태를 ..
Vuex가 무엇인가요? | Vuex 본 게시글은 아래의 글을 필사하였습니다. https://vuex.vuejs.org/kr/ Vuex가 무엇인가요? | Vuex Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램 과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다. "상태 관리 패턴"이란 무엇인가요? 간단한 Vue 카운터 앱부터 시작 해보 vuex.vuejs.org Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리입니다..
라우트 컴포넌트에 속성 전달 | Vue Router 본 게시글은 아래의 글을 필사하였습니다. https://router.vuejs.org/kr/guide/essentials/passing-props.html 라우트 컴포넌트에 속성 전달 | Vue Router 라우트 컴포넌트에 속성 전달 컴포넌트에서 $route를 사용하면 특정 URL에서만 사용할 수 있는 컴포넌트의 유연성을 제한하는 라우트와 강한 결합을 만듭니다. 컴포넌트와 라우터 속성을 분리하려면 다음과 같이 하십시오. ** $route에 의존성 추가** ** 속성에 의존성 해제** 이를 통해 어디서나 컴포넌트를 사용할 수 있으므로 컴포넌트 재사용 및 테스트하기가 더 쉽습니다. Boolean 모드 props를 true로 설정하면 route.params가 컴 router.vuejs.org 컴포넌트에서 $..
리다이렉트와 별칭 | Vue Router 본 게시글은 아래의 글을 필사하였습니다. https://router.vuejs.org/kr/guide/essentials/redirect-and-alias.html 리다이렉트와 별칭 | Vue Router 리다이렉트와 별칭 리다이렉트 리디렉션은 routes 설정에서도 할 수 있습니다. /a에서 /b로 리디렉션하려면 리디렉션은 이름이 지정된 라우트를 지정할 수도 있습니다. 또는 동적 리디렉션을 위한 함수를 사용할 수도 있습니다. 기타 고급 사용법은 예제 를 확인 하십시오. 별칭 리다이렉트는 사용자가 /a를 방문했을 때 URL이 /b로 대체 된 다음 /b로 매칭된다는 것을 의미합니다. 하지만 별칭이란 무엇입니까? /a의 별칭은 /b는 사용자가 /b를 방문했을 router.vuejs.org 리다이렉트(Redi..
이름을 가지는 뷰 | Vue Router 본 게시글은 아래의 글을 필사하였습니다. https://router.vuejs.org/kr/guide/essentials/named-views.html 이름을 가지는 뷰 | Vue Router 이름을 가지는 뷰 때로는 여러 개의 뷰를 중첩하지 않고 동시에 표시해야 하는 경우가 있습니다. sidebar 뷰와 main 뷰로 레이아웃을 생성합니다. 이름이 지정된 뷰가 편리한 경우 입니다. 뷰에 하나의 outlet이 있는 대신 여러 개를 사용하여 각 outlet에 이름을 지정할 수 있습니다. 이름이 없는 router-view는 이름으로 default가 주어집니다. 뷰는 컴포넌트를 사용하여 렌더링 되므로 여러 뷰에는 동일한 라우트에 대해 여러 컴포넌트가 router.vuejs.org 때로는 여러 개의 뷰를 중첩하..