TIL(20241018) [Vue.js Router]

---

vue.js의 컴포넌트 기본 구조

vbase or vueinit (자동완성)

<template>
  <div>

  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

📌 Vue.js 라우터?

• Vue.js 라우터는 Vue.js 어플리케이션에서 페이지 간 내비게이션을 관리하는 라이브러리이다.
  단일 페이지 어플리케이션(SPA)에서 사용되며, 사용자가 특정 URL을 입력하거나 링크를 클릭했을 때 해당 URL에 맞는 컴포넌트로 렌더링한다.

💡 라우터의 주요기능

1) 경로 정의: URL 경로와 컴포넌트를 매핑하여 사용자가 특정 URL로 이동했을 때 어떤 컴포넌트를 보여줄지 정의할 수 있다. 2) 동적 라우팅: URL의 일부를 변수로 사용하여 동적으로 라우트 생성할 수 있다. 3) 네스티드 라우트: 라우트를 중첩하여 복잡한 UI구조를 만들 수 있다. 4) 이전 및 다음: 사용자가 이전 페이지로 돌아가거나 다음 페이지로 이동할 수 있는 기능을 제공한다. 5) 라우트 가드: 특정 조건을 만족해야만 라우트에 접근할 수 있도록 제어할 수 있습니다.

폴더구조

├── components
│   └── Navbar.vue
│   └── Home.vue
│   └── Study1.vue
├── router
│   └── index.js
├── App.vue
└── main.js

// NavBar.vue
<template>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
      <router-link class="navbar-brand" :to="{name: 'Home'}">HOME</router-link>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapsibleNavbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item"><router-link class="nav-link text-light" :to="{name: 'Study1'}">Study1</router-link></li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

// router/index.js
import Home from "@/components/Home.vue";
import Study1 from "@/components/Study1.vue";
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/study1",
      name: "Study1",
      component: Study1
    }
  ]
})

export default router;

//main.js

import { createApp } from 'vue'
import App from './App.vue'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
import router from './router' // import

createApp(App)
.use(router)
.mount('#app')

// App.vue
<template>
 <div>
  <div>
    <Navbar />
  <div class="container">
    <router-view />
  </div>
  </div>
 </div>
</template>

  <script setup>
  import Navbar from './components/Navbar.vue';
  

  </script>

<style>


</style>

💡 부트스트랩 사용하기

npm install bootstrap

설치 후 App.vue -> import 필요

import { createApp } from 'vue'
import App from './App.vue'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

createApp(App).mount('#app')

Bootstrap page

• 부트스트랩 + v-for 카드 만들기

// 더미데이터 
export const sculptureList = [{
  number: 1,
  name: 'Homenaje a la Neurocirugía',
  artist: 'Marta Colvin Andrade',
  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
}, {
  number: 2,
  name: 'Floralis Genérica',
  artist: 'Eduardo Catalano',
  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
  url: 'https://i.imgur.com/ZF6s192m.jpg',
  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
}, {
  number: 3,
  name: 'Eternal Presence',
  artist: 'John Woodrow Wilson',
  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
  url: 'https://i.imgur.com/aTtVpES.jpg',
  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
}]

// Study1.vue
<div class="row justify-content-between">
    <div v-for="(list, index) in sculptureList" :key="index" class="card" style="width: 18rem;">
  <img :src=list.url class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title"></h5>
    <h6 class="card-subtitle mb-2 text-body-secondary"></h6>
    <p class="card-text"></p>
  </div>
</div>
</div>

data.js 있는 데이터 객체 한 개씩 list에 넣고 출력

💡 tailwindcss

💡 컴포넌트

• App.vue는 부모 컴포넌트, Example.vue 자식 컴포넌트

부모 컴포넌트에 자식 컴포넌트를 가져오고 싶을 때? 부모 컴포넌트에서 자식 컴포넌트 import 하기

<template>
 <div>
  <div>
    <h1>저는 App.vue 컴포넌트 입니다.</h1>
    <hr>
    <Example />
  </div>
 </div>
</template>

  <script setup>
  import Example from './components/Example.vue';
  </script>

Live server -> 출력

저는 App.vue 컴포넌트 입니다.
저는 Example.vue 컴포넌트 입니다.

💡 유용한 익스텐션(추가도구, 라이브러리)

• Vue 3 Snippets
• HTML to CSS autocompletion
• IntelliSense for CSS class names in HTML

💡 그냥 알아두기

npm run serve -> 배포할 때
npm run dev -> 개발할 때

💡 Vue.js 문법 (v-for, v-if)

• 실습문제1 : fruit 배열에서 ‘바나나’만 노란색으로 표시하기

//template
    <div v-for="(fruit, index) in fruits" :key="index">
      <p v-if="fruit === '바나나'" class="text-warning m-0">  : </p>
      <p v-else class="text-danger mb-0"> : </p>
    </div>

//script
const fruits = ['사과', '바나나', '수박', '사과', '바나나', '수박'];

• 실습문제2 : 나이가 짝수인 사람만 출력하기

// template
    <div v-for="(family, index) in people" :key="index">
      <p v-if="family.age%2 === 0" class="mb-0">
         //  // 
      </p>
    </div>

//scirpt
const people = [
  {
    name: 'hani',
    age: 33,
    address: '서울시 구로구 구로동'
  },
  {
    name: 'yoni',
    age: 35,
    address: '경기도 평택시 세교동'
  },
  {
    name: '낸내',
    age: 13,
    address: '경기도 평택시 세교동'
  },
  {
    name: '초롱',
    age: 6,
    address: '경기도 평택시 세교동'
  }
]