반응형 Framework/vue_Architecture12 Components(1) 나눠져 있는 섹션들을 다른 파일로 구분해서 따로 관리를 한다. 한 화면을 만들기 위해서 각각의 화면을 분리하여 필요할 때 사용한다. 자주 사용되는 내용의 컴포넌트는 별도의 파일로 분리하고 해당 부분만 불러와서 사용할 수 있는것이 컴포넌트이다. [컴포넌트 규칙] components 이름 작성 방법 - import 시에도 컴포넌트 명 작성시 지켜야할 규칙 1. 의미가 있는 단어의 네이밍 2. 2가지의 단어가 조합된 네이밍 3. 대문자로 시작하고, 카멜케이스로 작성한다. [vue파일에서 style scope] - 해당 파일에서만 적용 가능한 style로 scope를 줌 컴포넌트로 props 넘기는 방법 정적 데이터 전송 : username이 넘겨주고자 하는 값은 name인 string 데이터이다. 데이터를 전.. 2023. 1. 6. Vue Router - Route, Router 차이 $router - Router인스턴스 - 전체에서 딱 하나만 존재함 - 전반적인 라우터 기능을 한다. - router-link요소 없이 페이지 이동 property, method 설명 app 라우터를 사용하는 router vue인스턴스 mode 라우터모드 currentRoute 현재 라우트에 대한 Route 객체 push(location) 페이지 이동 실행 (히스토리 새 엔트리에 추가됨) replace(location) 페이지 이동 실행(히스토리에 쌓이지 않음) go(n) 히스토리에서 n단계 이동 back() 히스토리에서 한 단계 돌아감 forward() 히스토리에서 한 단계 앞으로감 addRoute(routes) 라우터에서 동적으로 라우트 추가 $ Route - Route객체는 현재 활성화 된 라우트의.. 2023. 1. 5. Composition API: ref() vs reactive() ref는 primitive type을 받고, reactive는 object를 받는다 라고만 알고 있었다. 하지만 ref도 객체를 다룰 수 있고, reactive와의 차이점을 정리해서 사용할 줄 알아야 한다. //api const post = [{ ..... 여러개 데이터 있음}] export function getPostById(id) { const numberId = parseInt(id); return posts.find(item => item.id === numberId); } 데이터를 export해주는 함수를 생성 const id = route.params.id; const item = ref({}); const fetchData = () => { const data = getPostById(id.. 2023. 1. 2. Vue Router(1) 라우터란? (Router) vue에서 말하는 라우터는 URL에 따라 어떤 페이지를 보여줄지 매핑을 해주는 라이브러리이다. 설치 npm install vue-router 정의 [라우터/ router] 경로: src/router/index.js 해당 경로에 라우터 객체를 생성한다. [라우트/ route] 각 라우트들은 URL에 대한 컴포넌트를 매핑해줄 정보를 정의한다. 사용방법 1. routes 정의하기 각 route에 대한 매핑정보를 정의하고 routes 배열을 생성한다. // src/router/index.js import HomeView from '@/views/HomeView.vue'; import AboutView from '@/views/AboutView.vue'; const routes = [ .. 2023. 1. 2. 이전 1 2 3 다음 728x90 반응형