vue小案例一：todolist

最新推荐文章于 2023-08-10 10:19:27 发布

笑道三千

最新推荐文章于 2023-08-10 10:19:27 发布

阅读量315

点赞数

分类专栏： # 前端小案例

本文链接：https://blog.csdn.net/weixin_42349568/article/details/109114049

版权

前端小案例专栏收录该内容

49 篇文章 7 订阅

订阅专栏

实现的效果：

在这里插入图片描述

单文件代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>todolist</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				background-color: #C3C3C2;
			}
			input:focus{
				outline:none;
			}
			input{
				border: none;
			}
			#app{
				width: 100%;
			}
			.box,.cotainer{
				width: 1200px;
				margin: 0 auto;
			}
			.header{
				line-height: 80px;
				background-color: #000000;
				color: #ffffff;
			}
			.fl{
				float: left;
			}
			.left{
				font-size: 40px;
				font-weight: 600;
				margin: 0 10px;
			}
			.right1{
				height: 40px;
				width: 600px;
				border-radius: 10px;
				padding-left: 10px;
				font-size: 20px;
				vertical-align: middle;
			}
			.right2{
				height: 40px;
				width: 60px;
				margin-left: 15px;
				font-size: 20px;
				vertical-align: middle;
			}
			.rl{
				float: right;
			}
			.clfl::after{
				content: '';
				clear: both;
				display: inline-block;
			}
			.first{
				line-height: 80px;
				font-size: 30px;
				font-weight: 800;
			}
			.num{
				background-color:lightblue;
				border-radius: 50%;
				height: 50px;
				width: 50px;
				text-align: center;
				margin-top: 15px;
				margin-right: 10px;
				line-height: 50px;
			}
			.listindex{
				width: 80%;
				font-size: 20px;
				line-height: 30px;
				margin: 10px 0px;
				padding: 0 15px;
				border-radius: 5px;
				background-color: #ADD8E6;
			}
			.listindex:hover{
				background-color: cornflowerblue;
				margin-left: 10px;
				transition: all 0.4s;
			}
			.listdelete{
				width: 60px;
				background-color: aquamarine;
				margin: 10px 0px;
				font-size: 20px;
				border: 1px solid transparent;  
				outline: none;    
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="header clfl">
				<div class="box">
					<div class="left fl">ToDoList</div>
						<div class="right rl">
							<input class="right1" placeholder="请输入代办事项" v-model="inputValue">
							<button class="right2" @click="add">提交</button>
						</div>
				</div>
			</div>
			<div class="cotainer">
				<div class="content">
					<div class="first clfl">
						<div class="title fl">正在进行</div>
						<div class="num rl">{{total}}</div>
					</div>
					<div class="list clfl" v-for="(item,index) in list">
						<div class="listindex fl">{{item}}</div>
						<button class="listdelete rl" @click="itemdelete(index)">删除</button>
					</div>
				</div>
			</div>
		</div>
		<script src="./js/vue.min.js" ></script>
		<script>
			var app=new Vue({
				el:'#app',    //实例负责管理的区域 ：id为app的区域，
				data:{
					msg:'hello world',
					inputValue:"",
					list:['去取经路上抓唐僧','高老庄的妹纸该成熟了','等天气转凉就去高老庄','背媳妇']
				},
				computed:{
					total:function(){
						return this.list.length
					}
				},
				methods:{
					//增加未完成列表
					add:function(){
						if(this.inputValue==''){
							alert('请输入内容')
						}else{
							this.list.push(this.inputValue)
							this.inputValue=''
						}
					},
					//删除对应列表
					itemdelete:function(val){
						this.list.splice(val,1)
					}
				}
			})
		</script>
	</body>
</html>

github地址：

https://github.com/ginboy/todo

更改为组件化：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>todolist</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				background-color: #C3C3C2;
			}
			input:focus{
				outline:none;
			}
			input{
				border: none;
			}
			#app{
				width: 100%;
			}
			.box,.cotainer{
				width: 1200px;
				margin: 0 auto;
			}
			.header{
				line-height: 80px;
				background-color: #000000;
				color: #ffffff;
			}
			.fl{
				float: left;
			}
			.left{
				font-size: 40px;
				font-weight: 600;
				margin: 0 10px;
			}
			.right1{
				height: 40px;
				width: 600px;
				border-radius: 10px;
				padding-left: 10px;
				font-size: 20px;
				vertical-align: middle;
			}
			.right2{
				height: 40px;
				width: 60px;
				margin-left: 15px;
				font-size: 20px;
				vertical-align: middle;
			}
			.rl{
				float: right;
			}
			.clfl::after{
				content: '';
				clear: both;
				display: inline-block;
			}
			.first{
				line-height: 80px;
				font-size: 30px;
				font-weight: 800;
			}
			.num{
				background-color:lightblue;
				border-radius: 50%;
				height: 50px;
				width: 50px;
				text-align: center;
				margin-top: 15px;
				margin-right: 10px;
				line-height: 50px;
			}
			.listindex{
				width: 80%;
				font-size: 20px;
				line-height: 30px;
				margin: 10px 0px;
				padding: 0 15px;
				border-radius: 5px;
				background-color: #ADD8E6;
			}
			.listindex:hover{
				background-color: cornflowerblue;
				margin-left: 10px;
				transition: all 0.4s;
			}
			.listdelete{
				width: 60px;
				background-color: aquamarine;
				margin: 10px 0px;
				font-size: 20px;
				border: 1px solid transparent;  
				outline: none;    
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<head222 :inputValue2='inputValue'  @childaddlist='addlist($event)'></head222>
			<contain222 :list2='list' :total2='total'  @del='deletelist($event)'></contain222>
		</div>
		<script src="./js/vue.min.js" ></script>
		<script>
			Vue.component('head222',{
				props:['inputValue2'],
				data:function(){
				return {
						msg: '子组件本身的数据'
					}
				},
				methods:{
					//增加未完成列表
					add:function(){
						if(this.inputValue2==undefined){
							alert('请输入内容')
						}else{
							//需要更改父组件中的数据list和inputVaalue
							//子组件向父组件传值：this.$emit('调用的父组件函数名字')
							this.$emit('childaddlist',this.inputValue2)
						}
					}
				},
				template:`
				   <div class="header clfl">
				   	<div class="box">
				   		<div class="left fl">ToDoList</div>
				   			<div class="right rl">
				   				<input class="right1" placeholder="请输入代办事项" v-model="inputValue2">
				   				<button class="right2" @click="add">提交</button>
				   			</div>
				   	</div>
				   </div>
				`
			})
			Vue.component('contain222',{
				props:['list2','total2'],
				data:function(){
				return {
						msg: '子组件本身的数据'
					}
				},
				methods:{
					//删除对应列表
					itemdelete:function(val){
						this.$emit('del',val)
					}
				},
				template:`
				  <div class="cotainer">
				  	<div class="content">
				  		<div class="first clfl">
				  			<div class="title fl">正在进行</div>
				  			<div class="num rl">{{total2}}</div>
				  		</div>
				  		<div class="list clfl" v-for="(item,index) in list2">
				  			<div class="listindex fl">{{item}}</div>
				  			<button class="listdelete rl" @click="itemdelete(index)">删除</button>
				  		</div>
				  	</div>
				  </div>
				`
			})
			var app=new Vue({
				el:'#app',    //实例负责管理的区域 ：id为app的区域，
				data:{
					msg:'hello world',
					inputValue:'',
					list:['去取经路上抓唐僧','高老庄的妹纸该成熟了','等天气转凉就去高老庄','背媳妇']
				},
				computed:{
					total:function(){
						return this.list.length
					}
				},
				methods:{
					addlist:function(val){
						this.list.push(val)
					},
					deletelist:function(val){
						this.list.splice(val,1)
					}
				}
			})
		</script>
	</body>
</html>