반응형 Framework43 composition API(1)_반응성(vue3.js) Vue 3.0 새로 등장한 Vue.js Composition API 기존 인스턴스 옵션 단위가 아닌, 특정 기능이나 논리의 단위로 코드를 그룹화 하는것이 목적인 함수 기반의 API이다. 그룹화된 로직을 여러 컴포넌트에서 재사용할 수 있도록 코드의 재사용성과 타입 추론(타입스크립트)이 크게 개선되었다고 한다. setup 함수는 beforeCreate 이전에 setup이 호출된다. (조기화 진입점, 마운트되기 전에 항상 실행) 컴포지션 API를 사용하는 경우 beforeCreate, created 훅 대신 setup을 사용한다. 인스턴스가 생성되기 전의 시점이기 때문에 컴포넌트 인스턴스에 접근하는 기능을 사용할 수 없다. 그렇기 때문에 setup 컴포넌트 안에서 this는 methos, data, compu.. 2022. 12. 30. fetching data (vue.js) (현재 셋팅 상태: json-server를 사용하여 가상 데이터를 생성했음) 이제 vue에서 데이터를 패칭을 할 때 어떻게 해야하는지 알아보자. vue의 생명주기에서 페이지가 로딩시에 진행되는 순서를 다시 생각해보면, 부모 created -> 자식 created -> 자식 mounted -> 부모 mounted 이 상태를 잘 기억하고 있어야 한다. created는 인스턴스가 작성이 된 후에 동기적으로 호출된다. 데이터 초기화 선언시에 주로 created를 사용하는데 가상돔을 사용할 수 없는 상태이다. mounted는 인스턴스가 마운트 된 직후이기에 가상돔을 핸들링 할 수 있는 상태이다. * [ 먼저, 데이터를 가져오려면 언제 어디서 얻을 수 있는지?] dom을 생성할 때 실행되는 생명주기 훅인 mount.. 2022. 12. 26. 부모, 자식간 데이터 전송 (vue.js) 부모 컴포넌트로 값 보내기 : $emit 자식 컴포넌트로 값 전달: props - 모든 props는 하위 속성과 상위 속성 사이의 단방향 바인딩을 형성한다. (상위 -> 하위만 됨) - 부모 컴포넌트 속성에 넘겨줄 props를 선언한다. - 자식 컴포넌트의 script안에 props안에 데이터 타입(Sting, Array, Object...)을 명시해야 하고, 디폴트값을 설정 할 수 있다. - lifecycle created(생성 시점)에 props로 넘어온 값이 자식 컴포넌트에도 생성 된다. Props 사용 방법 - 부모 컴포넌트에서 props선언 - 자식 컴포넌트에서 props 정의 // 1. 데이터 타입 props: { 프롭명: 데이터 타입 Only } // 2. 데이터 타입, 디폴트 props: .. 2022. 12. 25. 데이터 양방향 바인딩 (vue.js) v-model, computed, watch [v-model] - 입력창 이벤트 예시 {{ word }} v-on의 단축키 중 @keyup 사용 textmodifer에서 e를 파라미터로 전달해주고 word에는 해당 입력의 value값을 지정 입력되는 값: {{ word }} v-model 양방향 바인딩 (Data Two Way Binding) v-model="내가 원하는 Data값" input value를 write값으로 바인딩 한다. textModfier 메소드를 이용해서 write값을 변경해주어 하나의 키워드로 해결할 수 있다. {{ write }} @input 실시간 입력 값 데이터 공유 즉각적으로 표현되지 못하는 한글 영어와 달리 한국어는 조합이 필요하기에 input입력값에 즉각적이 표현이 안된다.. 2022. 12. 25. 이전 1 ··· 4 5 6 7 8 9 10 11 다음 728x90 반응형
