宝宝好像突然有点明白了这个神奇的组件；
简单粗暴的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<style type="text/css">
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}
table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-user-select: none;
}
p {
font-size: 20px;
}
</style>
<body>
<div class="col-md-4"></div>
<!--代表父组件-->
<div id="ex" class="col-md-4">
<p>{{mes}}</p>
<my-component></my-component>
</div>
<!--代表父组件-->
<!-- 代表子组件 -->
<template id="myComponent">
<table class="table table-hover .table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>数学</th>
<th>语文</th>
<th>物理</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr v-for="person in persons">
<td >{{ person.name }}</td>
<td>{{ person.age }}</td>
<td v-for="score in person.scores" >{{score.math}}{{score.chinese}}{{score.physical}}</td>
<td>
<button @click="delete($index)" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</template>
<!-- 代表子组件 -->
<div class="col-md-4"></div>
</body>
<script type="text/javascript">
var ex = new Vue({
el:'#ex',
data:{
mes:'团子最棒啦'
},
components:{//放子组件的定义和data,子组件和父组件的作用域是独立的，通过prop方法连接起来
'my-component':{
template:'#myComponent',
data: function(){
return{
persons:[
{"name":'团子',"age":'16',"scores":[
{"math":98},{"chinese":90},{"physical":99},
]},
{"name":'李四',"age":'17',"scores":[
{"math":92},{"chinese":50},{"physical":39},
]},
{"name":'王五',"age":'18',"scores":[
{"math":67},{"chinese":69},{"physical":86},
]},
{"name":'赵六',"age":'16',"scores":[
{"math":32},{"chinese":54},{"physical":79},
]},
]
}
},
//子组件的方法写在'my-component'内哦！
methods:{
delete:function(index){
this.persons.splice(index,1);
}
}
}
}
})
</script>
</html>
运行结果：
-
子组件的内容以嵌套的方式体现在父组件中
- 子组件可在页面上单独独立出来编写
prpo方法的具体的学习笔记地址看：https://www.zybuluo.com/mdeditor#使用props
表格的进阶：实现了搜索功能，删除功能；尚未实现增加和修改功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <style type="text/css"> body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; } table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; } th { background-color: #42b983; color: rgba(255,255,255,0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -user-select: none; } p { font-size: 40px; color:#fff; border-radius: 20px; text-align:center; background-color: #16A085; border: 1px solid #16A085; } p:hover{ background-color: #fff; color: #16A085; transition: .15s ease-in; cursor: pointer; } input{ background-color: #fff; color: #16A085; border: 1px solid #16A085; } #ex{ top: 80px; } </style> <body> <div class="col-md-4"></div> <!--代表父组件--> <div id="ex" class="col-md-4"> <my-component> </my-component> <p>{{mes}}</p> </div> <!--代表父组件--> <!-- 代表子组件 --> <template id="myComponent"> <label>搜索</label> <input type="text" name="" v-model="search"> <div style="height:20px"></div> <table class="table table-hover .table-bordered"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>数学</th> <th>语文</th> <th>物理</th> <th>编辑</th> </tr> </thead> <tbody> <tr v-for="person in persons |filterBy search "><!-- 查询所有--> <!-- <tr v-for="person in persons |filterBy search in 'name' ">查询名字 --> <!-- <tr v-for="person in persons |filterBy search in 'age' ">查询年龄 --> <!-- <tr v-for="person in persons |filterBy search in 'score' ">查询分数不可行 --> <td >{{ person.name }}</td> <td>{{ person.age }}</td> <td v-for="score in person.scores" >{{score.math}}{{score.chinese}}{{score.physical}}</td> <td> <button @click="delete($index)" class="btn btn-danger">删除</button> <button class="btn btn-info">修改</button> </td> </tr> </tbody> </table> <button class="btn btn-info">录入新学生</button> <div style="height:30px"></div> </template> <!-- 代表子组件 --> <div class="col-md-4"></div> </body> <script type="text/javascript"> var ex = new Vue({ el:'#ex', data:{ mes:'团子最棒啦O(∩_∩)O' }, components:{//放子组件的定义和data,子组件和父组件的作用域是独立的，通过prop方法连接起来 'my-component':{ template:'#myComponent', data: function(){ return{ search:'', persons:[ {"name":'团子',"age":'16',"scores":[ {"math":98},{"chinese":90},{"physical":99}, ]}, {"name":'李四',"age":'17',"scores":[ {"math":92},{"chinese":50},{"physical":39}, ]}, {"name":'王五',"age":'18',"scores":[ {"math":67},{"chinese":69},{"physical":86}, ]}, {"name":'赵六',"age":'16',"scores":[ {"math":32},{"chinese":54},{"physical":79}, ]}, ] } }, //子组件的方法写在'my-component'内哦！ methods:{ delete:function(index){ this.persons.splice(index,1); } } } } }) </script> </html>
运行结果：
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
