hands on vue - component의 필요성 연습

데일리 공부 기록

hands on vue - component의 필요성 연습

탐훈 2023. 3. 5. 17:26

728x90

[개요]

컴포넌트를 사용하기 전에 왜 사용해야 되는지, 어떤 문제점이 있어서 component가 탄생했는지 이해해보잦

model이 없이 하드코딩으로 되어있다.

- 모델을 만들고 반복문으로 element 생성하기

- Show Details 버튼을 누르면 보여주고, Hide Details를 누르면 요소가 안보이게 하라

기존 코드 ↓

Javascript 파일은 직접 만들어야함

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>FriendList</h1>
    </header>
    <section id="app">
      <ul>
        <li>
          <h2>Manuel Lorenz</h2>
          <button>Show Details</button>
          <ul>
            <li><strong>Phone:</strong> 01234 5678 991</li>
            <li><strong>Email:</strong> manuel@localhost.com</li>
          </ul>
        </li>
        <li>
          <h2>Julie Jones</h2>
          <button>Show Details</button>
          <ul>
            <li><strong>Phone:</strong> 09876 543 221</li>
            <li><strong>Email:</strong> julie@localhost.com</li>
          </ul>
        </li>
      </ul>
    </section>
  </body>
</html>

* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}

#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>FriendList</h1>
    </header>
    <section id="app">
      <ul>
        <li v-for="friend in friends">
          <h2>{{friend.name}}</h2>
          <button>{{detailVisible ? 'Hide' : 'Show'}} Details</button>
          <ul>
            <li><strong>Phone:</strong> {{friend.phone}}</li>
            <li><strong>Email:</strong> {{friend.email}}</li>
          </ul>
        </li>
      </ul>
    </section>
  </body>
</html>

const app = Vue.createApp({
    data: function(){
        return{
            detailVisible: false,
            friends: [
                {
                    id: 'manuel',
                    name: 'Manuel Lorenz',
                    phone:'01234 5678 991',
                    email: 'manuel@localhost.com',
                },
                {
                    id: 'julie',
                    name: 'Julie Jones',
                    phone:'09876 543 221',
                    email: 'julie@localhost.com',
                },
            ],
        }
    },
    methods: {

    }
}).mount('#app');

CSS 변동이 없어 추가하지 않음.

텍스트를 boolean으로 나누는 걸 배웠음