hands on vue - component화 하기

[목표]

1. 조각난 부분을 모아서 하나의 페이지로 만들어보자

 

---

빨간 부분을 따로 빼서

component화 한 뒤에 사용하고 싶다.

component용 폴더 만들고 파일을 생성한다.

 

// FriendContace.vue 소스
<template>
    <li>
        <h2>{{friend.id}}</h2>
        <button @click="toggleDetails">ShowDetail</button>
        <ul>
            <li>
                <strong>NAME: </strong>
                {{friend.name}}
            </li>
            <li>
                <strong>PHONE: </strong>
                {{friend.phone}}
            </li>
            <li>
                <strong>EMAIL: </strong>
                {{friend.email}}
            </li>
        </ul>
    </li>
</template>

<script>
export default{
    data(){
        return{
            friend: {
                id: 'manuel',
                name: 'Manuel Lorenz',
                phone: '1234 5678 90', 
                email: 'manuel@localhost.com'
            },
            detailVisible: false,
        }
    },
    methods: {
        toggleDetails() {
            this.detailVisible = !this.detailVisible;
        },
    },
    
}
</script>

import { createApp } from 'vue';
import App from './App.vue';
import FriendContact from './components/FriendContact.vue';

const app = createApp(App);
app.component('friend-contact', FriendContact);
// app.component('사용할 태그명', 태그명 적용파일);
app.mount('#app');

<template>
<section>
    <ul>
        <friend-contact></friend-contact>
    </ul>
</section>
</template>

<script>
import FriendContact from './components/FriendContact.vue'
    export default{
  components: { FriendContact },
        data(){
            return{
                friends:[
                    {
                       id: 'manuel',
                       name: 'Manuel Lorenz',
                       phone: '1234 5678 90', 
                       email: 'manuel@localhost.com'
                    },
                    {
                       id: 'tom',
                       name: 'Tom Hoon',
                       phone: '9281 238 2910', 
                       email: 'tomhoon@localhost.com'
                    },
                ],
            }
        },
        methods: {

        },
        computed: {

        }
    }
</script>

이제 CSS 적용해보자

 

오늘은 졸려서 잠... 바이..