Vue6 [Vue] 뷰 라우터 Vue는 SPA 프레임워크로 서버에 요청하여 이동할 페이지를 갱신하는 것이 아니라, 미리 해당 페이지들을 받아놓고 페이지 이동시 화면을 갱신합니다. 이러한 페이지 이동을 위한 환경을 제공하는 것이 뷰 라우터(Vue Router)입니다. 이러한 Vue 라우터를 설치하는 방법은 다음과 같습니다. npm install vue-router Vue 라우터 사용방법 이렇게 설치한 Vue 라우터를 사용하기 위해서는 Vue 라우터 인스턴스 정의하고 Vue인스턴스에 매칭해줘야 합니다. var router = new VueRouter({ routes: [ { path: 'url', component: 해당 url에 표시될 컴포넌트 } ] }); new Vue({ el: ..., router : router }); 또한, .. 2022. 5. 16. [Vue] 상하관계가 아닌 컴포넌트간 통신 이전 게시물에서는 event emit과 props를 이용한 상/하관계의 컴포넌트간의 통신을 다뤘습니다. 이번 게시물에서는 상하관계가 아닌 컴포넌트간의 통신을 다루겠습니다. 한마디로 정리하자면 event, props를 사용하여 컴포넌트 3개간의 통신을 만든다고 생각하시면 됩니다. 그림과 같이 상하관계가 없는 2개의 하위 컴포넌트가 root 또는 상위 컴포넌트를 통해 통신을 할 수 있습니다. event와 props에 관한 설명은 이전 게시물에 하였으니, 바로 예제 코드와 코드에 관한 간력한 설명으로 넘어가겠습니다. lowComponent2에 있는 버튼을 누르면 이벤트를 통해 deliverNum메소드가 동작하여 root 컴포넌트의 num이 1증가합니다. 이러한 num변수는 lowComponent1에 존재하는 .. 2022. 4. 25. [Vue] 컴포넌트간 통신(event, props) 이전 포스팅에서 컴포넌트는 화면내에서 영역별로 관리하는 것이라고 정리할 수 있습니다. 이렇게 영역별로 구성된 컴포넌트는 상위/하위의 개념이 생겨, 컴포넌트간의 관계(부모/자식)이 형성됩니다. 이번 포스팅에서는 상위/하위 컴포넌트 간의 통신에 대해 다루겠습니다. 컴포넌트간 통신은 상위에서 하위로 이뤄지는 event와 하위에서 상위로 이뤄지는 props가 있습니다. 이러한 event와 props로 컴포넌트간 모든 통신이 제어됩니다. event 하위에서 상위로 데이터를 전달 -> event 발생 먼저, event를 사용하기 위해서는 인스턴스 옵션에서 methods를 이용해야합니다. * 오해하실 수도 있는게 methods옵션은 event를 위한 옵션이 아니라 Vue 인스턴스를 제어하기위한 옵션이고 이러한 특징을.. 2022. 4. 22. [Vue] 컴포넌트 컴포넌트(Component)란 현재 인기있는 프론트엔드 프레임워크는 SPA(Single Page Application)라고도 불리며, 이러한 SPA는 모듈 단위로 템플릿만 교체하는 것이 특징이며, 이러한 Vue는 컴포넌트를 기반으로 구성됩니다. 이러한 컴포넌트와 이전 게시물에 언급한 필수적으로 생성해야하는 기본 오브젝트 단위인 인스턴스와 햇갈릴 수도 있다고 생각합니다. new Vue() 생성자로 인스턴스이자 Root 컴포넌트를 생성한다고 생각하시면 구조적으로 이해가 휠씬 쉬울거 같습니다. 이러한 컴포넌트로 인해 화면내에 영역을 구분하여 개발할 수 있습니다. 또한, 코드의 재사용성이라는 특징을 가질 수 있습니다. 하지만, 이러한 컴포넌트에는 아래에 설명하겠지만 전역/지역 컴포넌트로 나눠지고 어느정도의 범위.. 2022. 4. 13. [Vue] 인스턴스 Vue에서 인스턴스(Instance)란 Vue.js로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 오브젝트 단위입니다. 이러한 인스턴스는 다양한 동작을 수행할 수 있는 옵션을 가지고 있습니다. Vue 인스턴스의 생성자는 아래의 코드와 같습니다. 다양한 옵션으로 인스턴스를 구성할 수 있습니다. new Vue(...) 인스턴스의 옵션들 * computed와 watch는 비슷한 설명을 가지는 데, 이에 대해 이후 자세한 내용으로 게시할 예정입니다. 옵션 명 설명 예제 el 대상이 되는 HTML의 DOM 요소를 지정 id가 부여된 태그를 일반적으로 지정 el : '#class_name' data Vue 인스턴스가 담고있을 데이터를 생성 data : { num : 1 } template HTML, CSS 등.. 2022. 4. 7. [Vue] Vue.js 소개 업무상 필요하여 Vue.js를 공부하게 되었습니다. 인프런에서 캡틴판교님의 강의를 기본으로 학습하고 있습니다. 혹시나 게시물을 읽으시는 분 중 Vue를 학습하고자 한다면 요점을 이해하기 쉽게 설명해주시기 때문에 캡틴판교님의 강의를 추천합니다. Vue란 MVVM 패턴을 기반으로 디자인되었으며 재사용가능한 UI를 묶어서 사용가능합니다. MVVM이란 Model-View-ViewModel의 약어로 아래 3가지로 구성되어 있습니다. 사용자에게 보여지는 UI인 View 요청시 어플리케이션에서 사용되는 데이터 처리 기능의 Model DOM Listeres, DOM BIndings을 통해 View와 Model을 이어주는 역할인 View Model Vue는 이러한 MVVM패턴에서 View Model단에 위치한 JavaS.. 2022. 4. 4. 이전 1 다음
