본문 바로가기

⭐ Personal_Study97

Emit Event Emit Event Emit Event 개요 ✔ 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 이벤트를 발생 시킨다. 데이터를 이벤트 리스터의 콜백함수 인자로 전달 상위 컴포넌트는 해당 이벤트를 통해 데이터를 받음 Emit Event 기초 ... 클릭! This is my Component 흐름 정리 자식 컴포넌트에 있는 버튼 클릭 이벤트를 청취하여 연결된 핸들러 함수(childToParent) 호출 호출된 함수에서 $emit을 통해 상위 컴포넌트에 이벤트(child-to-parent) 발생 상위 컴포넌트는 자식 컴포넌트가 발생시킨 이벤트(child-to-parent)를 청취하여 연결된 핸들러 함수(parentGetEvent) 호출 Emit with Data ... 클릭! ✔ 이벤트를 발생(em.. 2022. 11. 13.

Pass Props Pass Props Data in components Data in components 개요 ✔ 완전히 동일한 data를 서로 다른 Component에서 보여주는 방법?! ✔ 컴포넌트는 부모-자식 관계를 가지고 있으므로, 부모-자식 관계만 데이터를 주고 받게 설정! ✔ 데이터 흐름 파악 용이 ✔ 유지 보수 용이 pass props & emit event ✔ 부모 -> 자식으로의 데이터 흐름 pass props ✔ 자식 -> 부모로의 데이터 흐름 emit event Pass Props 개요 ✔ 요소의 속성(property)를 사용하여 데이터 전달 ✔ props는 부모(상위) 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성 ✔ 자식(하위) 컴포넌트는 porps 옵션을 사용하여 수신하는 props를 명시적으.. 2022. 11. 12.

Vue Component Vue Component Vue Component 구조 ✔ 템플릿(HTML) HTML의 body 부분 눈으로 보여지는 요소 작성 다른 컴포넌트를 html요소 처럼 추가 가능 ✔ 스크립트(JavaScript) JavaScript 코드가 작성되는 곳 컴포넌트 정보, 데이터, 메서드 등 vue 인스턴스를 구성하는 대부분이 작성된다. ✔ 스타일(CSS) CSS가 작성되며 컴포넌트의 스타일을 담당 구조 정리 ✔ 컴포넌트들이 tree 구조를 이루어 하나의 페이지를 만든다. ✔ root에 해당하는 최상단의 component가 App.vue ✔ 이 App.vue를 index.html과 연결 ✔ 하나의 페이지만들 rendering -> SPA Vue component 실습 MyComponentj.vue // MyComp.. 2022. 11. 11.

SFC (Single File Component) SFC Component Component 개요 ✔ UI를 독립적이고 재사용 가능한 조각들로 나눈 것 즉 기능별로 분화한 코드 조각 ✔ CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 ✔ 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree를 구성하는 것이 보편적! ✔ 유지보수를 용이, 재사용성 향상 Component based architecture의 특징 ✔ 관리 용이 ✔ 재사용성 ✔ 확장 가능 ✔ 캡슐화 ✔ 독립적 Component in Vue ✔ 이름이 있는 재사용 가능한 Vue instance ✔ new Vue() SFC(Single File Component) ✔ 하나의 .vue파일이 하나의 Vue instace이고, 하나의 컴포넌트! ✔ Vue instan.. 2022. 11. 11.

Vue_CLI Vue CLI Node.js ✔ 자바스크립트는 브라우저를 조작하는 유일한 언어 -> 브라우저 밖에서는 구동할 수 없었다! ✔ 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 런타임 환경 NPM (Node Package Manage) ✔ 자바스크립트 패키지 관리자 Vue CLI 개요 ✔ Vue 개발을 위한 표준 도구 ✔ 프로젝트의 구성을 도와주는 역할 ✔ 확장 플러그인, GUI, Bable 등 다양한 툴 제공 Vue CLI 시작하기 설치 $npm install -g @vue/cli 프로젝트 생성 $vue create 프리셋 설정 디렉토리 이동 cd 서버 가동 npm run serve Vue CLI 프로젝트 구조 node_modules ✔ node.js 환경의 여러 의존성 모듈 ✔ python의 venv와.. 2022. 11. 9.

Vue: advanced attributes Vue Advanced Computed ✔ Vue instance 가 가진 option 중 하나 ✔ computed 객체에 정의된 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산 계산 결과가 변하기 전까지 함수를 재호출 하는 것이 아닌 계산된 값을 반환 method vs computed data_01 : {{ number1 }} data_02 : {{ number2 }} add_method : {{ add_method() }} add_method : {{ add_method() }} add_method : {{ add_method() }} add_computed : {{ add_computed }} add_computed : {{ add_computed }} add_computed : {{ add_c.. 2022. 11. 7.

이전 1 ··· 7 8 9 10 11 12 13 ··· 17 다음

티스토리툴바