WEB9 004. 상 하위 컴포넌트 관계 상하위 컴포넌트 관계 하위 컴포넌트에서는 상위 컴포넌트로 이벤트만 전달합니다. 상위 컴포넌트에서 하위 컴포넌트로는 props만 전달합니다. ※ props속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 props 속성 정의 하는 방법 Vue.component('child-component',{ props : ['props 속성 이름'] }); 상위 컴포넌트의 HTML 코드에 등록된 child-component 태그에 v-bind속성을 추가한다. 예제 코드 html을 확인하면 이런값이 나오는 것을 확인 할 수 있습니다. 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달하기 $emit( )을 이용하여 이벤트를 발생합니다. this.$emit('이벤트명'); v-on: 속성을 이용한 이.. 2019. 11. 21. 003. 뷰 컴포넌트(Component) 컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 있는 블록입니다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리합니다. 코드를 재사용하기 편리합니다. 컴포넌트 간의 관계는 자료구조의 트리(Tree)모양과 유사합니다. 지역 컴포넌트 vs 전역 컴포넌트 지역컴포넌트 특정 인스턴스에서만 유효한 범위를 갖습니다. 전역 컴포넌트 여러 인스턴스에서 공통으로 사용할 수 있습니다. 뷰로 접근 가능한 모든 범위에서 사용할 수 있습니다. 컴포넌트 등록하기 전역컴포넌트 Vue 변수를 이용하여 등록합니다. Vue.component( )를 호출하여 수행합니다. 형식은 아래와 같습니다. 전역 컴포넌트 표시 전역 컴포넌트를 활용한 예시 코드 컴포넌트 등록 지역 컴포넌트 인스턴스에 components속성을 추가합니.. 2019. 11. 21. 002. Vue의 라이프 싸이클 뷰 인스턴스 라이프 사이클 1. 인스턴스 생성 new Vue( ) 이벤트 및 라이프 사이클 초기화 → beforeCreate → 화면에 반응성 주입 → created → el, template 속성 확인 → template 속성 내용을 render로 변환 → beforeMount → $el 생성 후 el속성 값을 대입 → mounted 2. 인스턴스를 화면에 부착 인스턴스의 데이터 변경 → beforeUpdate → 화면 재 렌더링 및 데이터 갱신 → updated 3. 인스턴스 내용 갱신 인스턴스 접근 가능 → beforeDestoroy → 컴포넌트, 인스턴스, 디렉티브등 모두 해제 → destroyed → 인스턴스 소멸 4. 인스턴스 소멸 (끝) 각 분기 자세한 설명 beforeCreate 인스턴스가.. 2019. 11. 21. 001. Vue.js CDN을 통해 Vue.js 체험 및 뷰 속성 개념 Hello Vue.js 출력하기 CDN : https://cdn.jsdelivr.net/npm/vue/dist/vue.js {{message}} Vue인스턴스를 새로 생성한 후 data에 message 값을 넣어 위쪽 id="app"엘리먼트를 통해 {{message}}값을 전달합니다. 여기서 뷰 인스턴스 생성자 new Vue( ) 일때 Vue( ) Vue.js 라이브러리를 로딩하고 나면 접근 가능합니다. 사용하는 이유는 필요한 기능들을 미리 정의해 놓고, 사용자가 재정의 하여 편리하게 사용하기 위해입니다. 생성자란? 자주사용하는 옵션과 기능들을 미리저장 기존에 포함된 기능과 더불어 기존 기능을 확장하여 사용 객체 지향 프로그래밍의 객체 정의 방식 뷰 인스턴스 옵션 속성 data, el, template .. 2019. 11. 21. 000. Vue.js란? Vue란 무엇인가? 사용자 인터페이스를 만들기 위한 Progressive(점진적) 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있습니다. 또한 명시적 렌더링(코어 라이브러리) + 컴포넌트 기반 + 클라이언트 사이드 라우팅(프레임워크 기능) + 상태관리 + 빌딩 시스템을 할 수 있습니다. Vue의 장점 배우기가 쉽다, 리액트와 앵귤러에 비해 성능이 우수하고 빠릅니다. 리액트의 장점과 앵귤러의 장점을 갖고 있습니다. 데이터 바인딩 + 가상 돔(Virtual DOM) Vue.js에서 사용하는 용어 설명 View, 화면 : 사용자에게 보이는 화면, 브라우저를 만나서 보여지는 최종적인 화면 DOM : HTML 문서에 들어가는요소 ex) 태그, 클래스, 속성 등 DOM Liste.. 2019. 11. 20. 001. 자바스크립트 시작하기, 자바스크립트 기본 문법, 연산자 자바스크립트 시작하기 연습환경 먼저 자바스크립트를 연습하기위한 환경이 필요한테 크롬을 들어간 후 주소창에 about:blank라고 입력합니다. 그럼 아래와 같이 아무것도 안보이는 창이 나오는데 여기서 개발자 모드를 켜(F12 or ctrl+shift+i)을 입력해 실행시킵니다. 그러면 console창에 들어가서 앞으로 연습할 문법들을 실행시키겠습니다. 자바스크립트 기본 문법 먼저 자바스크립트는 기본적으로 C/C++과 JAVA와 유사한 문법을 가지고 있습니다. 기본적인 문법은 아래와 같습니다. 세미콜론 ; 으로 문장이 종료되어야 합니다. 변수명은 항상 알파벳이나 '_'로 시작하여야 합니다. 대, 소문자를 구별합니다. 예약어는 변수명으로 사용할 수 없습니다. 중괄호 { }를 이용하여 구역을 나눕니다. C/C.. 2019. 10. 22. 이전 1 2 다음
