Vue(八) TodoList功能开发

最新推荐文章于 2022-11-03 15:48:05 发布

MW0309

最新推荐文章于 2022-11-03 15:48:05 发布

阅读量169

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42222342/article/details/104201581

版权

Vue 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

Todolist开发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Todolist</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
				<li v-for="(item,index) of list" :key="index">
					{{item}}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue)
						this.inputValue=''
					}
				}
			})
		</script>
	</body>
</html>

效果

在这里插入图片描述

Todolist的组件拆分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Todolist</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<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>
		<script>
			Vue.component('todo-item',{
				props:['content'],
				template:'<li>{{content}}</li>'
			})
			
			new Vue({
				el:"#app",
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue)
						this.inputValue=''
					}
				}
			})
		</script>
	</body>
</html>

效果和上面一样
组件和实例的关系
vue中每一个组件都是一个实例

小练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Todolist</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<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>
		<script>
			Vue.component('todo-item',{
				props:['content'],
				template:'<li @click="handleClick">{{content}}</li>',
				methods:{
					handleClick:function(){
						alert('你非常聪明！')
					}
				}
			})
			
			new Vue({
				el:"#app",
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue)
						this.inputValue=''
					}
				}
			})
		</script>
	</body>
</html>

效果图

在这里插入图片描述

实现Todolist的删除功能

里面的知识点子组件和父组件的通信

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Todolist</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<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>
		<script>
			Vue.component('todo-item',{
				props:['content','index'],
				template:'<li @click="handleClick">{{content}}</li>',
				methods:{
					handleClick:function(){
						this.$emit('delete',this.index)
					}
				}
			})
			
			new Vue({
				el:"#app",
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue)
						this.inputValue=''
					},
					handleDelete:function(index){
						this.list.splice(index,1)
					}
					
				}
			})
		</script>
	</body>
</html>