欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-17 10:11:52
一篇教你使用Vue做个笔记本小项目,实现了添加笔记,渲染笔记内容,统计行数,统计字数,以及清空所有笔记。...

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

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

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