<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>the Nth vue program</h1>
<div id="app">
<todo>
<!--v-bind:形参=‘实参’-->
<todo-title slot="todo-title" v-bind:title="todoTitle"></todo-title>
<!-- 这样的v-for的todoIndex直接就表示下标 -->
<todo-items slot="todo-items" V-for="(item, indexxx) in todoItems" :key="indexxx"
v-bind:item='item' v-bind:index='indexxx' v-on:remove='removeItems(indexxx)'></todo-items>
<!-- 上面的v-on是自定义事件绑定冒号前是组件里的方法,冒号后是VM对象里的方法 -->
</todo>
</div>
<script src="vue/vue.js"></script>
<script>
// solt是插槽,可以动态地插入数据
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title", {
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items", {
props: ['item', 'index'],
// 只能绑定当前组件的方法
template: '<li>{{index}}.{{item}} <button @click="remove">删除</button></li>',
methods: {
remove: function(index) {
console.log(index);
// this.$emit是自定义事件分发
this.$emit('remove', index);
}
}
})
var vm = new Vue({
el: "#app", // el就是element的意思
data: {
todoItems: ['做饭','吃饭','洗碗'],
todoTitle: '备忘录'
},
methods: {
removeItems: function(index) {
// 这是js里删除元素的方法,index是起始下标,
// 第二个参数是从起始下标开始,一共删除几个元素
this.todoItems.splice(index, 1);
}
}
});
</script>
</body>
</html>