1、
2、代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-block] {
display: none;
}
</style>
</head>
<body>
<h1>创建第一个Vue应用</h1>
<div id="app">
<todo>
<todo-Title slot="todo-title" v-bind:title_temp_prop="title_data"></todo-Title>
<todo-items slot="todo-items" v-for="(item_cur,index_cur) in items_data" v-bind:item_temp_prop="item_cur"
v-bind:index_prop="index_cur" v-on:remove_cur="removeItems_vm(index_cur)"></todo-items>
</todo>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component("todo", {
template: '<div>\n' +
' <slot name="todo-title"></slot>\n' +
' <ul>\n' +
' <slot name="todo-items"></slot>\n' +
' </ul>\n' +
'</div>'
});
Vue.component("todo-title", {
props: ["title_temp_prop"],
template: '<div>{{title_temp_prop}}</div>'
});
Vue.component("todo-items", {
props: ["item_temp_prop", "index_prop"],
template: '<li>{{index_prop}} {{item_temp_prop}} <button @click="remove_prop">删除</button></li>',
methods: {
remove_prop: function (index_cur) {
//自定义事件分发
this.$emit('remove_cur', index_cur);
}
}
});
let vm = new Vue({
el: "#app",
data: {
message: "hello,message",
title_data: "标题列表",
items_data: ['java', 'linux', 'python'],
},
methods: {
removeItems_vm: function (index_vm) {
this.items_data.splice(index_vm, 1);
}
}
});
</script>
</body>
</html>
