b站看的狂神的vue，写在这里，纯属加深印象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<todo>//自定义组件名称，相当于盒子外壳
<todo-title slot="todo-title" :title="title"></todo-title>//这里面的：title是动态绑定数据的关键，与vue中的Data数据对应
<todo-item slot="todo-item" v-for="item in todoItems" :item="item"></todo-item>
</todo>
</div>
</head>
<body>
<script>
Vue.component('todo',{
template: '<div>'+
'<slot name="todo-title"></slot>'+
'<ul>'+
'<slot name="todo-item"></slot>'+
'</ul>'+
'</div>'
})
Vue.component('todo-title',{
props: ['title'],
template:'<div>{{title}} </div>'
})
Vue.component('todo-item',{
props: ['item'],
template:'<li> {{item}}</li>'
})
var vm=new Vue({
el: '#app',
data: {
title: 'zhou老师在线',
todoItems: ['aa','bb','cc']
}
})
</script>
</body>
</html>
1424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
