vue本地项目——小黑记事本

最新推荐文章于 2023-08-23 15:44:10 发布
最新推荐文章于 2023-08-23 15:44:10 发布
阅读量2.5k 收藏 8
点赞数 14
分类专栏： 前端 文章标签： vue html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcy8733996wcy/article/details/113186489
版权

B站看到了一套vue框架入门课程，敲了一个小项目（小黑记事本），欢迎批评指教。

一、实现效果

输入框输入任务，按下回车键，添加到任务最后
鼠标移动到某项任务，该任务后面出现红色叉号，点击可删除次任务
记事本最下方左边统计当前任务条数
记事本最下方右边clear实现清空所有任务

二、运行界面

运行界面

可删除任务

三、代码（含样式）

<!--
	卡片阴影样式：https://blog.csdn.net/qq_44607694/article/details/89605857
-->
<!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.5px solid #E0E0E0;
				border-bottom:0.5px solid #E0E0E0;
				border-left:1px solid #E0E0E0;
				border-right:1px solid #E0E0E0;
			}
			#todoapp{
				width: 280px;
				margin: 100px auto;
			}
			h1{
				font-family:"隶书";
				font-size: 32px;
				color: saddlebrown;
				text-align:center;
				margin-bottom: 40px;
			}
			input::-webkit-input-placeholder {
				color: #9C9C9C;
			}
			.new-todo{
				outline: none;
				width: 95%;
				height: 35px;
				border:1px solid #E0E0E0;
				background-color: white;
				padding:0 4px;
				color: #9C9C9C;
				font-size: 15px;
			}
			.view{
				display: flex;
				padding:0 4px;
				color: #9C9C9C;
				font-size: 15px;
				background-color: white;
			}
			.index{
				flex: 1;
				background-color: white;
			}
			label{
				flex: 10;
				background-color: white;
			}
			.destroy{
				flex: 1;
				display: none;
				color: red;
				border: none;
				background-color: white;
			}
			.view:hover .destroy{
				display: block;
			}
			.todo-count{
				display: block;
				width: 95%;
				line-height: 20px;
				color: #9C9C9C;
				font-size: 10px;
				padding:0 4px;
				border:0.5px solid #E0E0E0;
				background-color: white;
				/*box-shadow:5px 5px 20px rosybrown;*/
				box-shadow:
     		 		0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%), 
     		 		0 0.5em 0 -0.25em #f2f2f2ed, 
     		 		0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1), 
     		 		0 1em 0 -0.5em #e5e5e5, 
     		 		0 1em 0.1875em -0.5em rgba(0, 0, 0, 1);
			}		
			strong{
				background-color: white;
			}
			.todo-clear{
				position: relative;
				background-color: white;
				color: #9C9C9C;
				font-size: 10px;
				top: -24px;
				left: 250px;
				border: none;
			}

		</style>
	</head>
	<body>
		<section id="todoapp">
			<header class="header">
				<h1>小黑记事本</h1>
				<input v-model="inputValue" @keyup.enter="add" class="new-todo" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" />
			</header>
			
			<section class="main">
				<ul class="todo-list">
					<li class="todo" v-for="(item,index) in list">
						<div class="view">
							<span class="index">{{index+1}}</span>
							<label>{{item}}</label>
							<button class="destroy" @click="remove(index)">×</button>
						</div>
					</li>
				</ul>
			</section>
			<footer class="footer">
				<span class="todo-count">
					<strong>{{list.length}}</strong> items left
				</span>
				<button class="todo-clear" @click="clear">clear</button>
				
			</footer>
		</section>
		<footer class="info"></footer>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#todoapp",
				data:{
					list:["听音乐","散步","敲代码"],
					inputValue:"好好学习"
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue);
					},
					remove:function(index){
						this.list.splice(index,1);
					},
					clear:function(){
						this.list=[];
					}
				}
			})
		</script>
	</body>
</html>
月上小楼
关注
  • 14
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
前端 vue源码-小黑记事本.rar
07-22
学习前端vue框架后的练习，主要应用V-指令实现，还包html和css的练习，提供给大家，方便大家学习，下载后即可运行
【Vue】小黑记事本
汤圆小丸叽的博客
02-25 894
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>小黑记事本</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="robots" content="noin
vue案例小黑记事本详解
Im_xiaopei的博客
10-04 2076
大家好，今天学的东西不是很多，但遇到了一个特别有趣的vue小案例吧，我觉得可以拿出来给大家伙练练手，虽然案例简单，并不复杂，但也算是涵盖了vue大部分的常用知识点，希望大家可以多练练，有助于vue的学习。 正题开始。。。 案例叫做小黑记事本，大致长这个样子 大致功能是这个样子的， 1.在输入框中输入内容，点击回车，会将输入的内容按顺序放入下面的列表中， 2.再放入的过程中会自动统计记录的数量，显示在左下角 3.当鼠标点击对应的列表...
基于Vue的记事本todos效果展示及源码分享
qq_45654741的博客
02-26 457
前些天做了个使用vuex制作的记事本todos，这次使用vue做一个todos记事本 show code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
vue项目实战 vue项目实战
最新发布
01-20
vue项目实战 vue项目实战 vue项目实战 vue项目实战vue项目实战 vue项目实战 vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目
简单的vue小demo——小黑记事本
tingfe的博客
04-19 874
简单的vue小demo——小黑记事本 整体效果：完整代码在这里 一个简单的记事本，可实现简单的添加，删除，统计，清空，隐藏。 1.新增 1.1生成列表结果（v-for数组） 1.2获取用户输入（v-model） 1.3回车，新增（v-on，.enter） 具体实现： <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" //双向绑定
四、VUE基础——记事本案例（小黑记事本）
qq_41841658的博客
03-27 2339
一.分析记事本需要的功能 记事本新增事件 记事本删除事件 记事本统计事件（统计记事本中事件的数量） 记事本清空事件 记事本隐藏事件 二.记事本案例功能实现 1.新增功能 (1).步骤 写好样式后，生成列表结构(v-for和数组) 获取用户输入(v-model) 按下回车键，新增数据(v-on.enter添加数据) (2).代码实例 <!DOCTYPE html> <html lang="en"> <he.
用Vue实现小黑记事本案例
qq_34306228的博客
04-08 1196
用Vue实现小黑记事本案例实现内容代码介绍全部代码 实现内容 新增数据 删除操作 统计个数 清空clear 隐藏 在无数据时是隐藏状态 代码介绍 输入区域 <div id="record"> <h1>小黑记事本</h1> <div class="text"> <input type="text" class="inou" placeholder="请输入任务" v-model="req" @
07-Vue基础之综合案例——小黑记事本
weixin_46625500的博客
08-23 2529
案例 小黑记事本
小黑记事本
weixin_44526640的博客
06-10 1242
小黑记事本 代码部分 <meta http-equiv="content-type" content="text/html";charset="UTF-8"/> <meta name="robots" content="noindex,nofollow"/> <meta name="googlebot" content="noindex,nofollow"/> <meta name="viewport" content="width-device-w
记事本 小黑记事本 v2.0.0.1
10-17
小黑记事本是一款电脑记事本软件，可以用来取代系统自带的记事本软件，软件功能丰富多样，界面简洁。可自定义文本底纹，独有半透明模式，并自带多种字体，让你的电脑记事本更
css小黑记事本专用效果
04-13
css小黑记事本专用效果
Vue小项目——cnode社区
01-20
寒假开始，复习了Vue的基本指令后，决定从简单项目开始，真正用Vue做一些实际项目，作为练手，我先做了cnode社区的初级项目，主要用了cnode的api信息，然后进行内容展示。算是把Vue-cli和Vue-router复习着用了一下
vue-cli+webpack记事本项目创建
08-30
主要为大家详细介绍了vue-cli+webpack创建记事本项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue记事本.html
08-17
VUE基础小黑记事本，html，js代码&css样式，可直接打开查看。
vue项目--网页记事本
09-25
vue小项目--网页记事本，还没用到脚手架，主要就是想熟练一些vue的基本语法，里面的css语法可以参考，很有帮助
vue综合项目——悦听音乐播放器
wcy8733996wcy的博客
01-28 4295
B站看完一位老师讲的vue项目（悦听），是一个音乐播放器，花了两天时间完成了这个项目，第一次将前几天学习的vue知识应用到项目中，虽然有些地方还需要完善，但是通过这几天的学习，无论是vue入门，还是对html、css知识的复习，都很有收获，很有成就感。之前，每次网页布局的时候，有很多次，仅仅改变了一个元素的属性，页面整体发生了“很奇怪”的变化，很有挫败感，这几天重新学习了css中有关文档流、浮动、定位、弹性盒字等知识，感觉豁然开朗。 前两天学习了vue，仅仅算是入门了，主要是一些vue指令和axios的使用
小黑记事本vue源代码
10-02
小黑记事本是一个使用Vue框架编写的项目，实现了简易的记事本功能。下面是部分小黑记事本的Vue源代码： 模板部分： ```html <template> <div class="notebook"> <h1>小黑记事本</h1> <div class="input-container"> <textarea v-model="content" placeholder="开始编写"></textarea> </div> <div class="button-container"> <button @click="saveNote">保存</button> <button @click="clearNote">清空</button> </div> <div class="notes-container"> <h2>已保存的笔记</h2> <ul> <li v-for="(note, index) in notes" :key="index">{{ note }}</li> </ul> </div> </div> </template> ``` 脚本部分： ```javascript <script> export default { data() { return { content: '', notes: [], }; }, methods: { saveNote() { if (this.content.trim() !== '') { this.notes.push(this.content.trim()); this.content = ''; } }, clearNote() { this.content = ''; }, }, }; </script> ``` 样式部分： ```css <style scoped> .notebook { text-align: center; margin: 20px auto; } .input-container { margin-bottom: 20px; } textarea { width: 300px; height: 150px; } .button-container button { margin: 0 10px; } .notes-container { margin-top: 30px; } ul { list-style-type: none; padding-left: 0; } li { margin-top: 10px; } </style> ``` 以上是小黑记事本的一个简化版本，实现了输入内容的保存和清空，并将已保存的笔记展示在界面上。用户可以在文本框中输入内容，点击保存按钮即可将内容添加到已保存的笔记列表中。点击清空按钮可以清空文本框中的内容。小黑记事本提供了简单的界面交互，方便用户保存和管理笔记。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值