Vue (14) 썸네일형 리스트형 [ Vue ] Vue Router 사용하기 ( + query , params ) Vue Router 라우팅이란 웹 페이지의 간의 이동방법을 의미. Vue Router는 1) URL에 따라 보여줄 컴포넌트를 연결해 놓고, 2) 해당 URL로 이동했을때 연결된 컴포넌트를 보여준다. Router 설치 npm i vue-router --save routes 파일 생성 설치 후 routes.js 파일을 만들고, 사용할 컴포넌트들과 vue, vuerouter 등을 import 해준뒤 ulr과 컴포넌트들을 연결해준다. import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../views/Main.vue' // route에 등록할 컴포넌트들 등록 Vue.use(VueRouter) export const router =.. [ Vue ] CLI로 SPA프로젝트 생성하기 + Vuetify Vue CLI Vue CLI 는 Vue.js 를 생성, 관리, 실행할 수 있는 Command Line Interface 이다. Vue CLI 를 사용하면 Webpack, Babel, Lint, TypeScript, Vue Router, Vuex 등의 다양한 피쳐들을 선택해서 프로젝트를 생성할 수 있다. CLI 설치 npm install -g @vue/cli 프로젝트 생성 //vue create 생성할프로젝트이름 vue create new-project-name “Please pick a preset:” 선택옵션에서 나오면 “default(babel, lint)” 항목을 선택한다. 프로젝트 실행 npm run serve Vuetify Vuetify는 Vue.js를 위한 개발된 디자인 프레임워크이다. Rea.. [ Vue ] 컴포넌트간 데이터 전달 , PROPS와 EMIT 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 - 분리된 상태의 부모, 자식 컴포넌트 간 긴밀히 소통해야 할 때가 있는데, 이때 필요한 것이 컴포넌트 통신. 즉 props와 emit이다. props 부모에서 자식으로 데이터를 전달하기 위해 사용 프롭스 속성은 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 통신 // 하위 컴포넌트의 내용 var childComponent = { props: ['프롭스 속성 명'] } ** props 받을때 배열으로 넣는거 잊지말기 ** :: 사용예시 :: 결과 emit emit은 자식이 부모에게 데이터를 전달하기 위해서 이벤트를 발생시키는 것 // 하위 컴포넌트의 내용 this.$emit('이벤트 명'); :: 사용예시 :: 결과 ✓ 참고 joshua19.. [Vue.js #1] 리액트와 뷰의 공통점 Vue는 자바스크립트 기반의 프레임워크 Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크. 1 반응적이고 조합 가능한 컴포넌트를 제공 React와 Vue 모두, 웹 UI를 작은 컴포넌트 단위로 구성 * 컴포넌트는 다른 프로젝트에서도 재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해지는 장점이 있다. 2 Virtual DOM 둘다 virtual DOM을 기반으로 하며, tree알고리즘을 통해 변화사항을 찾아낸다. * virtual Dom이 하는 일은 데이터가 업데이트 되면 이전 virtual Dom이랑 비교해서 변경된 부분만 실제 Dom에 적용시킨다 장점 ⇒ Virtual DOM을 통해 렌더를 한 번으로 줄여 효율적으로 HTML을 제어 .. 이전 1 2 다음
