반응형 Vue.js6 Level 1. 개발 환경 설정 수업준비를 위한 Link Chrome vscode node.js Vue.js dev tools 참고 Link learn-vue-js_git 초심자를 위한 Github 협업 튜토리얼 (with 토끼와 거북이) 팀 개발을 위한 git, github 시작하기 vscode setting list Vetur Night Owl Material Icon Theme Live Server (live server을 이용해서 별도의 서버없이 바로 실행결과를 확인) ESLint Prettier Auto Close Tag Atom Keymap command + option + i (개발자도구) 2020. 12. 28. Level 1. Vue.js 소개 MVVM 모델에서의 Vue Vue는 무엇인가? MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 View - 브라우저에서 사용자에 비추어지는 화면(html) DOM Listeners - View의 이벤트 요소들을 청취하여 자바스크립트를 Model에서 실행 Data Bindings - Model의 변동된 사항을 View에 전달 vscode에서 ! + tab - html 기본적인 폼 div#app - 생성 기존의 웹 개발 방식 (HTML, Javascript) Reactivity 구현 (Vue의 핵심) data의 변화를 라이브러리에서 감지하여서 알아서 화면을 자동으로 그려주는 것 Object.defineProperty() API 문서 링크 Reactivity 코드 라이.. 2020. 12. 28. Level 1. 인스턴스 Cracking Vue.js MDN 생성자 함수 설명 문서 MDN Prototype 설명 문서 Vue에서 제공하는 api와 속성 기본적인 생성자 함수의 정의 Vue를 생성자 관점에서 찍어내는 이유 아래와 같이 Vue의 인스턴스를 사용하여서 객체를 생성할때마다, 함수를 정의하는 것이 아니라, 생성자를 사용하여서 사용할 수 있다. 인스턴스의 속성, API들 2020. 12. 28. Level 1. 컴포넌트 통신 방법 - 기본 컴포넌트 통신 방식 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 합니다. 상위에서 하위로는 데이터를 내려줌, 프롭스 속성 하위에서 상위로는 이벤트를 올려줌, 이벤트 발생 컴포넌트 통신 규칙 방식을 통하여서 컴포넌트 간의 데이터 흐름을 손쉽게 확인할 수 있기 때문이다. props 속성 event emit {{ num }} 뷰 인스턴스에서의 this this 관련 글 1 this 관련 글 2 2020. 12. 28. Level 1. 컴포넌트 통신 방법 - 응용 같은 컴포넌트 레벨 간의 통신 방법 AppContent에서 AppHeader로 직접 전달을 할 수 없기 때문에 AppContet에서 Root로 먼저 전달 후 Root에서 AppHeader로 전달을 한다. 2020. 12. 28. Level 1. 컴포넌트 Vue components 뷰 컴포넌트 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능입니다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있습니다. 인스턴스를 생성하면 기본적으로 Root 컴포넌트가 된다. 2020. 12. 28. 이전 1 다음 728x90 반응형
