vue基础知识点总结
1.常用属性
2.常用指令
3.组件
4.插槽
5.演示作用域插槽3种实现方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作用域插槽3种方式</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<my-app>
<template slot-scope="slot">
<span v-for="s in slot.data">
{{s}}--->
</span>
</template>
</my-app>
<hr />
<my-app>
<template slot-scope="slot">
<table border="1">
<tr v-for="ss in slot.data">
<td>{{ss.id}}</td>
<td>{{ss.name}}</td>
<td>{{ss.data}}</td>
<td>{{ss.price}}</td>
<td>{{ss.count}}</td>
</tr>
</table>
</template>
</my-app>
<hr />
<my-app>
<template slot-scope="slot">
<ul>
<li v-for="sss in slot.data">{{sss}}</li>
</ul>
</template>
</my-app>
</div>
<template id="cnp">
<div>
<slot :data = "boolist"></slot>
</div>
</template>
</body>
<script>
Vue.component('my-app',{
template:'#cnp',
data(){
return{
boolist: [{
id: 1,
name: 'Vue.js实战',
data: '2015-11-19',
price: 35.00,
count: 1
},
{
id: 2,
name: 'Vue.js实战',
data: '2014-03-21',
price: 45.00,
count: 1
},
{
id: 3,
name: 'Vue.js实战',
data: '2012-05-03',
price: 85.00,
count: 1
},
{
id: 4,
name: 'Vue.js实战',
data: '2016-01-01',
price: 73.00,
count: 1
},
{
id: 5,
name: 'Vue.js实战',
data: '2017-08-15',
price: 15.00,
count: 1
}
]
}
}
});
//实例
const app = new Vue({
el:'#app',
});
</script>
</html>
6.效果展示