vue案例小黑记事本详解

最新推荐文章于 2024-07-23 17:06:34 发布

Im_xiaopei

最新推荐文章于 2024-07-23 17:06:34 发布

阅读量2.3k

点赞数 2

分类专栏：学习文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/Im_xiaopei/article/details/120606158

版权

本文介绍了一个简单的Vue案例——小黑记事本，涵盖了Vue的常用知识点。通过这个案例，你可以学习到如何编写基本样式，根据输入内容添加事项，显示记录数量，清除所有事项以及删除特定事项。案例涉及双向数据绑定、数组操作和事件处理等核心概念。

摘要由CSDN通过智能技术生成

大家好，今天学的东西不是很多，但遇到了一个特别有趣的vue小案例吧，我觉得可以拿出来给大家伙练练手，虽然案例简单，并不复杂，但也算是涵盖了vue大部分的常用知识点，希望大家可以多练练，有助于vue的学习。

正题开始。。。

案例叫做小黑记事本，大致长这个样子

大致功能是这个样子的，

1.在输入框中输入内容，点击回车，会将输入的内容按顺序放入下面的列表中，

2.再放入的过程中会自动统计记录的数量，显示在左下角

3.当鼠标点击对应的列表项时，删除本条数据，其他数据重新排序

4.点击clear按钮，数据清零

开始具体的实现吧

一.，基本样式的编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小黑记事本</title>
		<style>
			*{
				margin: 0 ;
				padding: 0;
				background-color: #F0F0F0;
			}
			.todo{
				background-color: red !important;
				width: 98%;
				list-style: none;
				line-height: 35px;
				border-top:0.5p