教你使用Vue实战笔记本案例（效果图+贡献所有代码）

程序员文章站 2022-06-17 10:11:52

一篇教你使用Vue做个笔记本小项目，实现了添加笔记，渲染笔记内容，统计行数，统计字数，以及清空所有笔记。...

学习Vue，从做实战开始，没有华丽的css装饰和复杂的html界面，只关注学习Vue本身。

功能很简单，可以直接看图即可，代码放在下面，看前记得点个赞，养成好习惯哦，关注我也可以的哦，因为我时常会出很多Vue小项目哦，当然有问题你在底下评论说话呀

Vue实战系列

教你使用Vue实战轮播图案例（效果图+贡献所有代码）

先上效果图
教你使用Vue实战笔记本案例（效果图+贡献所有代码）
操作一波笔记本

笔记本小项目代码

（特别提醒：导入的外链式Vue.js记得换成自己的路径）
@粗心的小伙伴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗剽悍的种子</title>
		<style>
			header,article,footer{
				width: 500px;
				margin: auto;
				border: 1px solid #000;
			}
			header{
				height: 50px;
			}
			header input:first-child{
				width: 370px;
				border-radius: 0.5em;
				margin-top: 6px;
				margin-left: 30px;
				margin-right: 30px;
				height:30px;
				float: left;
			}
			input:nth-child(2){
				margin-top: 5px;
				height:36px;
				border-radius: 0.5em;
				cursor: pointer;
			}
			
			article{
				position: relative;
				min-height: 200px;
			}
			article li span{
				cursor:pointer;
			}
			article div:first-child{
				width: 100%;
				height: 30px;
				position: absolute;
				border: 1px solid #000;
			}
			footer{
				height: 30px;
			}
			footer div{
				text-align: center;
				line-height: 33px;
				float: left;
				width: 160px;
			}
			footer div:last-child span{
				padding: 3px;
				border: 1px solid #000000;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<center><h1>一颗剽悍的种子</h1></center>
			<!-- 头部输入笔记 -->
			<header>
				<input v-model="content" type="text"/>
				<input type="button" v-on:click="add()"  value="写下" />
			</header>
			<!-- 文章内容 -->
			<article>
				<ol>
					<li v-for="(item,index) in lists">
						<span v-on:click="remove(index)">{{item}}</span>
					</li>
				</ol>
			</article>
			<!-- 底部操作笔记 -->
			<footer>
				<div>{{lists.length}} 条笔记</div>
				<div>共 {{this.lists.toString().replace(/,/g,"").length}} 个字</div>
				<div><span v-on:click="clear()">清空所有笔记</span></div>
			</footer>
		</div>
		<!-- vue.js要换成自己的路径 -->
		<script src="js/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					lists:["关注","点赞","评论","一颗剽悍的种子"],
					content:""
				},
				methods:{
					//添加笔记
					add:function(){
						this.lists.push(this.content);
					},
					//删除对应的第几条笔记
					remove:function(index){
						var r = confirm("确认要删除第"+(index+1)+"条笔记吗？");
						if(r){
							this.lists.splice(index,1);
						}
					},
					//清除所有笔记
					clear:function(){
						this.lists = [];
					}
				}
			})
		</script>
	</body>
</html>

最后：

为了更好的阅读体验，我把想说的话都放在了下面，嘿嘿。

我是一颗剽悍的种子 把我会的，认真的分享是我写博客一直不变的信条。
如果你能看到这篇博文，说明咱们还是很有缘的；希望能带给你一些许帮助，创作的不易，把我文章的知识带走，你的三连留下，点赞，评论，关注，是我最大的动力。

本文地址：https://blog.csdn.net/A_hxy/article/details/107448596

相关标签：【最佳实践】Vue实战项目 vue vue实战项目

上一篇： Flink的架构体系

下一篇：数据结构导论(第二章线性表）