Board.vue

method 의 데이터가

data (상태변수)로 간다

export default {

    // 생명주기(자동으로 호출되는 역할) 
    // = method가 누군가에 의해 호출 되어야 작동하기때문
    created(){
        // 백엔드에서 필요한 데이터를 받는 타이밍
        console.log('1. created'); // 콘솔창에 자동으로 찍힘
        this.handleBoard(1); // 메소드 호출
    },
    mounted(){
        // 화면의 변화를 주는 타이밍
        console.log('2. mounted');
    },
    
    // 상태변수 (state)
    data(){
        return {
            pages : 12,
            items : [],
        }
    },
    // !!호출되어지는!! 함수, 메소드, 기능
    methods:{
        handleBoard(page) {
            console.log('handleBoard 메소드', page);
            // [{}, {}, {}]
            this.items = [
                { id:'a', name:'가', tel:page, email:'a@a.com'},
                { id:'b', name:'나', tel:page, email:'a@a.com'},
                { id:'c', name:'다', tel:page, email:'a@a.com'},
            ];
        }
    }
}

=======================================================

<-- tmp = [{id, name, tel, email:}{},{}] -->

            <tr v-for="(tmp, idx) in items" v-bind:key="tmp"> 
                <td>{{ (idx+1) }}</td>
                <td>{{ tmp.id  }}</td>
                <td>{{ tmp.name}}</td>
                <td>{{ tmp.tel }}</td>
                <td v-text="tmp.email"></td> <!-- 같음 -->
            </tr>