반응형 개발/Vue.js21 Vue-CLI 시작하기(프로젝트 생성 및 디렉토리 구조) Vue-CLI(Command Line Interface) vue 개발환경을 설정해는 명령어 실행 도구 기본적인 프로젝트 구조 세팅으로 디렉토리 구조 및 webpack 등 설정 Vue-CLI 설치 - 기본적으로 nodejs 및 npm 설치가 되어있어야 함 # Global 설치 npm install -g @vue/cli # 확인 vue --version - 5.0.3버전이 설치 되었음 Vue-CLI 프로젝트 생성 - vue create '프로젝트명'으로 실행 vue create hello-world - vue3가 디폴트로 선택되어 나오는데 일단 vue2를 공부 중임으로 Vue2선택하고 엔터 - 생성이 완료되면 아래와 같이 실행 명령이 나옴 - 명령어 실행 $ cd hello-world $ npm run se.. 2022. 3. 21. Vue.js Router 개념 및 구성 Vue Router Vue에서 SPA(Single Page Application) 웹 페이지 변경/전환을 지원하는 라이브러리 페이지 변경을 위해서 DOM을 새로 갱신하는 것이 아닌 변경된 요소영역(컴포넌트)만 갱신 Vue Router 태그 - 페이지 이동 태그, HTML 태그로 표시되어 클릭 시 URL 값으로 이동 Login - 변경되는 URL에 따라 해당 컴포넌트를 표시해주는 영역 Vue Router 인스턴스 - Vue Router 기능은 Router인스턴스를 통해서 사용 가능 // Router 인스턴스 생성 var router = new VueRouter({ mode: "history", // 기본 값은 Hash모드(history 모드를 사용하면 브라우저 히스토리 스택에 기록) routes: [ //.. 2022. 3. 19. Vue.js 컴포넌트와 컴포넌트 통신 Vue 컴포넌트 화면을 조합해서 구성할 수 있게 블럭형태로 분할 된 화면영역(Component)을 의미 컴포넌트 간의 관계는 일반적으로 Tree 구조 화면 구성요소의 재활용 각 컴포넌트는 각각의 고유한 유효범위를 가짐 전역(Global) 컴포넌트 Vue 변수를 사용해서 등록하는 컴포넌트 모든 인스턴스에서 접근 가능 일반적으로 전역 컴포넌트를 선언해서 사용하는 경우는 거의 없음, 대부분 플러그인, 3thParty 라이브러리 사용 시 활용 됨 Vue.component("global-component", { template: "Content", }); 지역(Local) 컴폰너트 Vue 인스턴스에서 'components' 속성을 사용해서 정의 해당 인스턴스의 유효범위 내에서만 사용 가능 new Vue({ el:.. 2022. 3. 19. Vue.js 인스턴스 - 옵션(속성) 및 라이프사이클 Vue 인스턴스 Vue를 사용하기 위해 필수적으로 생성해야 하는 기본 단위(new Vue();) Vue인스턴스는 Vue를 통해 생성하는 하나의 오브젝트 인스턴스를 사용함으로써 Vue에서 미리 선언되어 있는 속성,API를 재사용 및 활용 할 수 있음 Vue 인스턴스 옵션(속성) el: Vue가 실행되는 html DOM요소를 지정, CSS선택자를 사용(ex. id: #, class: . 접두어 사용) data: Vue인스턴스가 관리하는 데이터, Reactivity 반영(data 변경 시 화면 자동 반영) template: 화면에 표시할 요소(html, css 등) props: 부모컴포넌트의 데이터를 받을 수 있는 속성의 리스트([]) methods: 화면의 동작 및 이벤트 로직을 제어하는 메소드 선언 com.. 2022. 3. 16. Vue.js란 무엇인가? - Hello World Vue.js 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리 SPA(Single Page Application)를 구축하는데 이용 가능 View(html DOM): 사용자에게 보이는 화면. Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장 ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역 DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리 DOM Listener: DOM의 변경에 대한 즉각.. 2022. 3. 16. 이전 1 2 3 다음 반응형
