반응형 분류 전체보기130 부모, 자식간 데이터 전송 (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. 브라우저 저장소 브라우저 저장소 쿠키, 웹 스토리지, 로컬 스토리지, 세션 스토리지 HTTP통신을 통해서 클라이언트가 서버에게 requeset를 보내고 서버는 클라이언트에게 requeset에 대한 response를 보내고 접속을 종료한다. 통신이 끝나면 상태 인증에 쓰이는 상태 정보를 유지하지 않는다는 특징이 있다. 서버측에선 자원 낭비를 하지 않는 장점이 있지만, 통신을 할 때마다 새로 연결해줘야 하기 때문에 클라이언트는 그 때마다 인증을 해줘야하는 단점을 갖고있다. 이러한 문제에 사용하는 것이 브라우저의 스토리지이다. 브라우저의 저장공간인데, 쿠키, 웹 스토리지(로컬 스토리지, 세션 스토리지)가 있다. 웹 스토리지는 html5부터 제공되는 저장소이다. 쿠키와 웹 스토리지는 모두 해당 도메인에 대한 데이터를 브라우저에.. 2022. 12. 25. Lifecycle Hooks (vue.js) Lifecycle Hooks이란? 컴포넌트에서 생명주기 기능(생성, 수정, 소멸)의 과정을 말한다. 대표적인 경우 템플릿을 컴파일 하는 경우 데이터 설정이 필요한 경우 컴포넌트를 dom에 마운트 하는 경우 데이터가 변경되어 dom을 업데이트 하는 경우 Lifecycle Hooks 단계 크게 created, mounted, updated, destroyed 4단계로 나뉘어 진다. creation: 생성 단계 DOM이 생성되기 전 단계 beforeCreate, created 다른 훅과 달리 서버 렌더링 과정 중에도 실행이 된다. [beforeCreate] - 라이프사이클에서 가장 먼저 실행된다. - 컴포넌트가 DOM에 가장 처음으로 추가되기 전 상태를 말한다. - 컴포넌트가 DOM에 추가되기 전이기 때문에 .. 2022. 12. 25. 이전 1 ··· 14 15 16 17 18 19 20 ··· 33 다음 728x90 반응형
