1.todolist功能
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
</body>
</html>
<script>
new Vue({
el:"#root",
data(){
return {
inputValue : '',
list : []
}
},
methods: {
handleSubmit(){
this.list.push(this.inputValue);
this.inputValue = '';
}
}
})
</script>
2.todolist组件拆分
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item">
</todo-item>
</ul>
</div>
</body>
</html>
<script>
// 全局组件
// Vue.component('todo-item',{
// template : '<li>item</li>'
// });
// 局部组件
let TodoItem = {
props: ['content'],
template : '<li>{{content}}</li>'
};
new Vue({
el:"#root",
components: {
TodoItem
},
data(){
return {
inputValue : '',
list : []
}
},
methods: {
handleSubmit(){
this.list.push(this.inputValue);
this.inputValue = '';
}
},
})
</script>
3.组件与实例的关系
vue中的每一个组件都是一个vue实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item">
</todo-item>
</ul>
</div>
</body>
</html>
<script>
// 全局组件
// Vue.component('todo-item',{
// template : '<li>item</li>'
// });
// 局部组件
let TodoItem = {
props: ['content'],
template : '<li @click="handleClick">{{content}}</li>',
methods:{
handleClick(){
alert('clicked');
}
}
};
new Vue({
el:"#root",
components: {
TodoItem
},
data(){
return {
inputValue : '',
list : []
}
},
methods: {
handleSubmit(){
this.list.push(this.inputValue);
this.inputValue = '';
}
},
})
</script>
4.实现todolist的删除功能
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete">
</todo-item>
</ul>
</div>
</body>
</html>
<script>
// 全局组件
// Vue.component('todo-item',{
// template : '<li>item</li>'
// });
// 局部组件
let TodoItem = {
props: ['content','index'],
template : '<li @click="handleClick">{{content}} - {{index}}</li>',
methods:{
handleClick(){ // 删除功能
this.$emit('delete',this.index); //..触发自定义的delete事件
}
}
};
new Vue({
el:"#root",
components: {
TodoItem
},
data(){
return {
inputValue : '',
list : []
}
},
methods: {
handleSubmit(){
this.list.push(this.inputValue);
this.inputValue = '';
},
handleDelete(index){
this.list.splice(index,1);
}
},
})
</script>
