todolist案例——vue脚手架（1）

一、基础样式：

二、创建vue项目：

1. 项目目录：

2. 分解html、css样式

一、基础样式：

html:


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<link href="style.css" type="text/css" rel="stylesheet"/>
	head>
	<body>
		
		<div class="main">
			
			<div class="header">
				<input type="text" placeholder="输入项目，按回车键添加" />
			div>
			
			<div class="list">
				<ul>
					<li><input type="checkbox"/> Vue <input type="button" value="删除" class="btn"/>li>
					<li><input type="checkbox" />React<input type="button" value="删除" class="btn"/>li>
					<li><input type="checkbox" />Java<input type="button" value="删除" class="btn"/>li>
					<li><input type="checkbox" />HTML+CSS<input type="button" value="删除" class="btn"/>li>
				ul>
			div>
			
			<div class="footer">
				
				<input type="checkbox" />   已完成(0) / 总任务(4)
				
				<input type="button" value="清除所有任务" class="btn"/>
			div>
 
		div>
		
		
	body>
html>

css:


*{
	margin: 0px;
	padding: 0px;
}
li{
	list-style: none;
}
.main{
	width: 600px;
	margin: auto;
}
.btn{
	 position: absolute;
	 right: 0px;
	 background: red;
	 color: #fff;
	 width: 90px;
	 height: 33px;
	 border: none;
	 border-radius: 5px;
	 cursor: pointer;
	 display:none;
}
/* 头部文件 */
.header{
	border: 1px solid #999999;
	padding: 15px;
}
.header input{
	width: 100%;
	height: 40px;
	line-height: 40px;
}
/* list样式 */
.list{
	border: 1px solid #999999;
	padding: 15px;
	margin-top: 15px;
}
.list li{
	height: 40px;line-height: 40px;color: #666;
	border-bottom: 1px solid #999999;
	position: relative;
}
.list li .btn{
		 top:2px;
}
 
.list li:hover .btn{
	display: block;
}
 
/* 底部 */
.footer{
	border: 1px solid #999999;
	padding: 15px;
	margin-top: 15px;
	position: relative;
}
.footer .btn{
	display: block;
	padding: 10px 20px;
	width: auto;
	height: auto;
	padding-bottom: 9px;
	top:6px;
	right: 5px;
}

二、创建vue项目：

1. 项目目录：

主要是项目的组件部分，这里又细分了头部Header、List 和 Footer三个vue子组件

2. 分解html、css样式

1.1、App.vue

1.2、 Header.vue

1.3、 List.vue

1.4、 Footer.vue

三、初始化数据

1. 定义一个数组

把样式中静态的数据化为动态的数据，在父组件App.vue里创建一个todo数组，包含列表数据；并把数组传给List.vue子组件里面去

name: 'App',

data(){

return {

todo:[

{id:1,name:'Vue',done:false},

{id:2,name:'React',done:false},

{id:3,name:'Java',done:true},

{id:4,name:'HTML+CSS',done:true},

]

}

},

这里的id 就是每一列数据的身份证，具有唯一性。便于后面的增添、删除、修改状态其他操作；done是为了修改状态属性，有true 和false 两个值

2. List 组件接收数组

1. 用props接收数组

name:'List',

props:['todo'],

//测试是否拿到了todo数组的值

mounted(){

console.log(this.todo);

}

2. 遍历数组

创建Item.vue组件做List.vue的子组件，保存遍历后的值

List.vue


 
<script>
import Item from '../components/Item'
 
export default{
    name:'List',
	props:['todo'],
	//测试是否拿到了todo数组的值
	mounted(){
		console.log(this.todo);
	},
	components:{
        Item,
    },
}
script>
 
<style>
/* list样式 */
.list{
	border: 1px solid #999999;
	padding: 15px;
	margin-top: 15px;
}
.list li{
	height: 40px;line-height: 40px;color: #666;
	border-bottom: 1px solid #999999;
	position: relative;
}
.list li .btn{
		 top:2px;
}
 
.list li:hover .btn{
	display: block;
}
 
style>

先测试一下数据是否能显示

Item.vue


 
<script>
export default {
    name:'Item',
}
script>
 
<style scoped>
 
style>

在list组件里 v-for循环，注意要加key值

此时列表里只有初始测试的值，数组的值还没有添加到Item的列表里

把值添加到列表里

四、添加数据

1. 在头部组件里绑定一个enter键的键盘事件

methods:{

pressAdd(){

console.log('111');

}

}，

2. 按下enter键后，能把输入框中的值添加到列表里去

App.vue中

methods:{

addTodo(name){

const item={id:new Date().getTime(),name,done:false};

this.todo.unshift(item);//数组的添加方法

//console.log('app',item);

},

},

Header.vue

props:['addTodo'],

methods:{

pressAdd(e){

this.addTodo(e.target.value);

//console.log('111');

}

},

五、删除数据

App.vue

绑定新数组把值传递到list

:delTodo="delTodo" >

methods:{

addTodo(name){

const item={id:new Date().getTime(),name,done:false};

this.todo.unshift(item);

//console.log('app',item);

},

delTodo(id){

this.todo=this.todo.filter((item)=>{

return item.id!=id;

})

}

},

List.vue

再在list把值传递给item

:delTodo="delTodo">

props:['todo','delTodo',],

Item.vue

添加点击删除事件，回调父组件里的函数，获取id值删除列表

{{item.name}}@click="pressDel(item.id)"/>

props:['item','delTodo',],

methods:{

pressDel(id){

this.delTodo(id);//调用父组件回调函数并传递id

}

}

相关阅读:
Spring DI 简单案例
使用HuggingFace实现 DiffEdit论文的掩码引导语义图像编辑
浏览器安全-同源策略和CORS
MTK8183/MT8183安卓4G核心板_联发科安卓手机开发板主板方案定制
c#winform根据邮箱地址和密码一键发送email
RDD(弹性分布式数据集)及常用算子
Vue2：路由组件缓存技术
关于微信小程序的生命周期
LeetCode 1334. 阈值距离内邻居最少的城市：多次运用单源最短路的迪杰斯特拉算法
实例驱动计算机网络

原文地址：https://blog.csdn.net/qq_53841687/article/details/126352514

todolist案例——vue脚手架（1）

一、基础样式：

二、创建vue项目：

1. 项目目录：

2. 分解html、css样式

三、 初始化数据

1. 定义一个数组

2. List 组件接收数组

四、添加数据

五、 删除数据

三、初始化数据

五、删除数据