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:,name:'张三',height:},{id:,name:'李四',height:},{id:,name:'王平',height:},{id:,name:'老张',height:}]};

<!-- 创建视图层，接收存放学生数据的界面、数据-->
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>'

});//目的：组件可复用