mobssie

vue3 + pinia + vue-router + vite + tailwind npm i -g @vue/cli vue --version

computed는 기본적으로 읽기 전용이다. Computed프로퍼티는 method와 비슷하지만 Computed는 proxy역활을 한다. 때로는 캐싱. =>> 연결하는 역할을 한다. set methods 을 설정하면, newValue 매개변수를 받음 https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

pass props : 부모에서 자식에게 데이터를 전달 Emit Events : 자식이 부모에게 데이터를 전달 독립적으로 컴포넌트가 존재 자식이나 부모가 누군지 몰라서 동작함. 네이밍 규칙 컴포넌트내에 속성으로는 kebab-case / 스크립트 내부에서는 camelCase 사용 동적 Props v-bind를 이용해서 데이터를 전달해야 한다. 부모 컴포넌트의 message가 변경된 경우 자식 컴포넌트는 다시 message 데이터를 받아 다시 렌더링을 함.(v-bind 생량가능) 주의점: 단방향이기 때문에 부모에서 업데이트가되면 자식에게도 업데이트가되지만, 그 반대는 안됨. props를 변경하고 싶다면 1. props의 초기 값을 컴포넌트 로컬 데이터로 정의 2. props로 부터 계산된 속성을 정의 pro..

컴포넌트는 Vue 오브젝트를 확장한 오브젝트이다. 확장이란 미리 Vue 오브젝트에 옵션을 정의해 이미 옵션이 정의된 Vue오브젝트를 생성하는 것을 의미함. 컴포넌트를 생성하면 확장된 Vue 인스턴스가 생성. Vue.Component는 컴포넌트를 글로벌하게 등록하는 메서드 컴포넌트를 사용하면 공통적인 로직이나 템플릿을 엘리먼트를 통해 재활용할 수 있다. 주의할점! : 확장된 Vue 인스턴스, 즉 컴포넌트에서 data를 정의할 때 반드시 함수로 정의해야 한다. 컴포넌트 이름은 하이픈을 포함한 소문자이어야 한다. 로컬 컴포넌트 : Vue 인스턴스 혹은 컴포넌트의 옵션으로 등록해 해당 컴포넌트 내부에서만 사용하도록 지정 할 수 있다. var dateComponent = { template: '{{ now }}'..

템플릿 문법은 주로 디렉티브(Directive)로 이루어져있음. DOM 엘리먼트에 속성을 추가하는 것을 의미. 데이터바인딩 Mustache : {{ expression }} v-text : Mustache와 거의 동일하게 작동. 중괄호로 감싸는 대신 디렉티브를 이용해서 데이터를 바인딩 가능 v-html : HTML 문자열을 그대로 바인딩. v-bind : View의 텍스트를 렌더링하는 문법이 아닌 태그의 속성에 데이터를 바인딩하는 문법. 조건문 v-if : 조건에 따라 템플릿을 보여줌 (v-else, v-else-if) template if : v-if는 디렉티브이기때문에 한 가지 엘레먼트에만 적용가능하지만 template 엘레먼트 한 번에 처리 가능하다. 엘레먼트는 가상의 엘레먼트이기 때문에 자식들만 ..

methods computed : 데이터의 경우에는 methods보다 computed를 사용하는 것이 좋음 계산된 속성은 getter, setter watch : Vue 인스턴스의 데이터가 변경되는 시점을 감시해 메서드를 호출 데이터가 변경되면 watch는 변경됨을 확인하고 메서드를 실행 ▶ 라이프사이클이 Vue 인스턴스의 이벤트를 후킹하는 것이라면, watch는 Vue 인스턴스의 데이터의 변경을 후킹하는 것.

beforeCreate: Vue 인스턴스가 생성되기 전 create: Vue 인스턴스가 생성된 후 beforeMount: Vue 인스턴스가 마운트되기 전 mounted: Vue 인스턴스가 마운트된 후 beforeDestroy: Vue 인스턴스가 파괴되기 전 destroyed: Vue 인스턴스가 파괴된 후 beforeUpdate: Vue 인스턴스의 데이터가 변경되어 다시 렌더링하기 전 updated: Vue 인스턴스의 데이터가 변경되어 다시 렌더링한 후

doc : vuex.vuejs.org/kr/ 상태관련 라이브러리 VueX 모든 컴포넌트가 공유할수있는 집중식 저장소. 상태는 앱을 작동하는 원본 소스 뷰는 상태의 선언적 매핑 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 액션이 바뀌면 상태가 바뀌고 매핑되어있는 뷰가 바뀌는 단방향 데이터가 흐르고있다. 여러개의 컴포넌트가 있을경우, 또는 중첩되는 컴포넌트가 깊어질수록 prop가 장황해질수있음. 그래서 중앙에서 관리할수있는 전역 저장소가 있다면 이 문제를 해결 할 수 있음. 1. 상태 (State) VueX는 단일 상태 트리를 사용. mapState : 컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야 하는경우에 사용 import {mapState} from 'vuex' com..