전체 글 (445) 썸네일형 리스트형 hands on vue3 - router 관련 퀴즈 풀어보기(router-link에 변수사용하기) [목표] 위와 같이 경로에 직접 URL 경로를 썼었다. 이제는 javascript 변수를 사용하여 동적으로 이용해보자 주어진 소스는 아래의 링크에서 얻을 수 있다. https://tomhoon.tistory.com/390 hands on vue3 - 주어진 소스를 보고 router에 대한 문제를 풀어봐라(router 파라미터사용하기) [목표] router로 설정된 path 뒤에 파라미터가 올 수 있다. 그 파라미터들을 queryString이라고도 하는데 vue에서는 어떻게 쿼리스트링을 사용할 것인지에 대해 살펴보자. 먼저 주어진 소스를 보고 조건 tomhoon.tistory.com 버튼을 클릭하면 해당하는 팀의 멤버를 보여주는 기능을 구현해보기 [TeamsList.vue] [TeamsItem.vue] {.. hands on vue3 - 주어진 소스를 보고 router에 대한 문제를 풀어봐라(router 파라미터사용하기) [목표] router로 설정된 path 뒤에 파라미터가 올 수 있다. 그 파라미터들을 queryString이라고도 하는데 vue에서는 어떻게 쿼리스트링을 사용할 것인지에 대해 살펴보자. 먼저 주어진 소스를 보고 조건에 맞게 구현해보고 수정완료 소스와 비교해보자 구현해야할 조건들 1. "/teams/경로(teamId)"로 오는 경우 /teams 뒤에 오는 내용을 파라미터로 받기 2. teamId에 맞는 user를 출력하라. 출력하는 컴포넌트는 TeamMembers.vue 3. teamId와 user에 대한 데이터는 App.vue에서 TeamMembers로 provide & inject로 구현하라 예를 들어서 teams: [ { id: 't1', name: 'Frontend Engineers', member.. hands on vue3 - 버튼 클릭하여 라우터를 이용해 URL 이동 [목표] 간단한 예제를 만들기 위해 버튼을 생성한다. 해당 버튼을 클릭하면 URL 이동을 한다. router를 사용하여 구현해보자 버튼을 생성하고 버튼을 누른다면 '/teams'로 이동한다. 수정된 소스 [UsersList.vue] 라우터 테스트 버튼 hands on vue3 - 조건에 따라 option disabled 다르게 먹이기 [목표] 수정 전 소스를 갖고서 다음 조건에 맞게 select를 구현하라 1.유형1이 선택일 경우 유형2, 유형3 모두 disabled 상태다. 2.유형1이 중개업을 선택했을 경우 유형2가 disabled가 풀린다. 다만 유형3은 그대로 disabled 유지다. 3. 유형1이 중개업을 선택 -> 유형2을 선택 -> 유형3 disabled가 풀린다. 4. 유형1이 개인/일반은 선택했을 시 유형2만 열린다. 수정 전 소스 선택하여 고르기 유형1 선택 중개업 개인/일반 유형2 유형2의 A 유형2의 B 유형2의 C 유형2의 D 유형2의 E 유형3 유형3의 가 유형3의 나 유형3의 다 유형3의 라 유형3의 마 유형3의 바 수정 후 소스 선택하여 고르기 유형1 선택 중개업 개인/일반 유형2 유형2의 A 유형2의 B.. hands on vue3 - router가 active될 때 css를 위한 커스텀 class명 [목표] router가 active 될 때 혹은 active되지 않은 곳에 특정 css를 먹이고 싶을 때 커스텀 클래스명을 지어서 적용해보자! 이런 식으로 사용하면 된다. 아래는 적용된 모습 [main.js] import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router' import TeamsList from './components/teams/TeamsList.vue'; import UsersList from './components/users/UsersList.vue'; import App from './App.vue'; const app = createApp(App) const router = c.. hands on vue3 - router-link 태그를 이용해보기 [목표] router-view와 router-link를 이용해 동적인 변화를 주자 원래는 클릭시 URL변화는 없고 component태그를 이용하여 동적인 변화를 주었다. 이제는 router를 이용하여 URL를 이동을 통해 동적인 변화를 줘보자 ! 이전 포스팅에서 소스를 그대로 사용하여 router를 이용한 동적변화를 도전해본 뒤 아래 소스를 참고하기! [App.vue] [main.js] import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router' import TeamsList from './components/teams/TeamsList.vue'; import UsersList from './comp.. hands on vue3 - npm으로 router 설치하기 [목표] npm을 이용해 router에 대한 라이브러리를 설치하자 터미널에 다음 명령어를 입력한다. npm install --save vue-router [main.js] import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; import TeamList from './components/teams/TeamsList.vue'; import UsersList from './components/users/UsersList.vue'; const router = createRouter({ history:createWebHistory(), //how .. hands on vue3 - Routing 시작 시작 전 소스를 세팅하자 [App.vue] [main.js] import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App) app.mount('#app'); [components/nav/TheNavigation.vue] Teams Users [components/teams/TeamMembers.vue] {{ teamName }} [components/teams/TeamItem.vue] {{ name }} {{ memberCount }} Members View Members [components/teams/TeamList.vue] [components/users/UserItem.vue] {{ name }} {{.. 이전 1 ··· 41 42 43 44 45 46 47 ··· 56 다음
