Vue - 컴포넌트 사용법

html내장요소와 이름이 겹치지 않게 '-'사용
컴포넌트는 앱안의 미니앱임
자체 템플릿을 지정해야함

    <section id="app">
      <ul>
        <friend-contact></friend-contact>
      </ul>
    </section>

const app = Vue.createApp({
data() {
    return {
        friends: [
            {id: 'a1', 
            name: 'azy',
            phone: '123 456 789',
            email: 'zzzzz'},

            {id: 'a2', 
            name: 'jliy',
            phone: '123 456 000',
            email: 'yyyy'},
        ]
    }
}

});

app.component('friend-contact',{
    template:`
    <li>
        <h2>{{friend.name}}</h2>
        <button @click ="toggleDetail()">Show Details</button>
        <ul>
        <li><strong>Phone:</strong> {{friend.phone}}</li>
        <li><strong>Email:</strong> {{friend.email}}</li>
        </ul>
    </li>
    ` ,
    data() {
        return {
            detailvisible : false,
            friend: [
                {id: 'a1', 
                name: 'azy',
                phone: '123 456 789',
                email: 'zzzzz'}]
        
        };
    },
    methods : {
        toggleDetail() {
            this.detailvisible = !this.detailvisible;
        }
    },

});


app.mount('#app');