Vue

Vue.js 시작하기디렉티브Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 렌더링된 DOM에 특수한 반응형 동작을 한다.조건문반복문

vuejs.org - Vue 인스턴스모든 Vue 앱은 Vue 함수로 새 인스턴스를 만드는 것부터 시작Vue 인스턴스의 생성 시에는 options 객체를 전달해야 한다.Vue 인스턴스가 생성될 때 데이터 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가된다. 각 속

템플릿 내에 너무 많은 연산을 넣으면 코드가 복잡해지고 추후에 유지보수도 어렵게 된다. 이를 해결하기 위해 computed와 watch 속성이 존재한다.어떤 특성을 갖고 어떻게 다른지 알아본다.의존성과 바인딩종속 대상을 따라 저장된다계산해야 하는 목표 데이터를 정의하는

Vuex가 무엇인가요?Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.단방향 데이터 흐름상태 : 앱을 작동하는 원본 소스뷰 : 상태의

vuex 시작하기이번 한 달의 목표는 vuex 내용 숙지하기!모든 Vuex 애플리케이션의 중심에는 store가 있다. store는 기본적으로 애플리케이션의 상태를 보유하는 컨테이너이며 다음과 같은 특징을 갖는다.Vuex store는 반응형이다. Vue 컴포넌트는 상태를

Vuex 가이드 - 상태Vuex는 단일 상태 트리를 사용한다. 즉, 각 애플리케이션마다 하나의 저장소만 갖게 된다.Vuex 저장소는 반응적이기 때문에 computed를 사용해 일부 저장소 상태를 가져올 수 있다.store.state.counter가 변경되면 계산된 속성

Vuex 가이드 - Getters저장소 상태를 기반하는 상태를 계산해야 하는 경우가 발생할 수 있다.둘 이상의 컴포넌트가 이를 사용해야 하는 경우 함수를 복사하거나 여러 위치에서 가져와야 하는 이상적이지 않은 경우가 발생한다.이러한 문제점을 Vuex를 사용하면 gett

Vuex 가이드 - 변이Vuex 저장소에서 실제로 상태를 변경하는 유일한 방법은 변이하는 것이다. 각 변이에는 타입 문자열 핸들러가 있으며, 핸들러 함수는 첫번째 전달인자로 상태를 받는다.변이 핸들러의 호출은 아래와 같다.변이에 대해 payload라고 하는 추가 전달인

Vuex 가이드 - 액션액션은 변이와 유사하지만상태를 변이시키는 대신 액션으로 변이에 대한 커밋을 한다임의의 비동기 작업이 포함될 수 있다액션 핸들러는 저장소 인스턴스의 컨텍스트 객체를 받는다. 그래서, context.commit을 호출해 변이를 커밋하거나 상태, ge

Vuex 가이드 - 모듈여러 상태를 선언하고 사용하다 보면 저장소가 방대해지고 복잡해져 추후 관리 및 유지보수에 어려움을 겪을 수 있다.이를 위해 Vuex는 저장소를 모듈로 나눌 수 있다. 각 모듈은 상태, 변이, 액션, 게터 등을 포함할 수 있다.모듈 변이와 gett