Vue.js——component(組件)
阿新 • • 發佈:2017-12-03
封裝 tlist student html new component 聲明 model 輸出
概念:
組件(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>
<!-- 定義模型層,存放學生的數據-->
varmyModel = {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>‘ });//目的:組件可復用
Vue.js——component(組件)