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

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

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

Vue实战系列

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

先上效果图
教你使用Vue实战笔记本案例(效果图+贡献所有代码)_第1张图片
操作一波笔记本
教你使用Vue实战笔记本案例(效果图+贡献所有代码)_第2张图片
教你使用Vue实战笔记本案例(效果图+贡献所有代码)_第3张图片

笔记本小项目代码

(特别提醒:导入的外链式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>

最后:

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

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

你可能感兴趣的:(【最佳实践】Vue实战项目,vue,vue实战项目)