Vue.js——component(組件)

概念：

　　組件（Component）是自定義元素。

做用：

　　能夠擴展HTML元素，封裝可重用的代碼。

<div id="myView">
    <!-- 把學生的數據循環輸出，用 v-bind動態綁定 props的值到父組件的數據中-->
    <student
        v-for="student in studentList"
        v-bind:data="student"
        v-bind:key="student.id">
    </student>
</div>

<!-- 定義模型層，存放學生的數據-->
var myModel = {studentList:[{id:1,name:'張三',height:178},{id:2,name:'李四',height:178},{id:3,name:'王平',height:178},{id:4,name:'老張',height:173}]};

<!-- 建立視圖層，接收存放學生數據的界面、數據-->
var myViewModel = new Vue({ el:'#myView', data:myModel });

//導入本身寫的js,主要目的是：組件可複用
//<script src="js/student.js"></script>

//註冊
Vue.component('student', {
    //聲明props
    props:['data'],
    template: '<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>'
});//目的：組件可複用