2020 零基础 Vue快速入门 教开发一个记事本（激发编程乐趣）【整理+源码】
文章目录
- 1、引言
- 2、记事本概述
- 3、模板展示
- 4、新增功能开发
- 5、删除功能开发
- 5、统计功能开发
- 6、清空功能开发
- 7、隐藏功能开发
- 8、结束语
- 点击进入Vue❤学习专栏~
1、引言
最近呢，也是在自学Vue中，通过边学边记录，算是一项成长记录篇把，本篇博客以简单记事本开发，激发对前端开发的兴趣，过程中的一些样式就不展示了，只展示一部分核心代码。需要源码的话在文章末尾会提供本次项目源码，请多指教~
2、记事本概述
该记事本取名为“加菲猫的记事本”，至于为什么这个名字就不要深究了哈~
记事本主要功能：
- ① 新增任务功能
- ② 删除任务功能
- ③ 统计任务功能
- ④ 清空任务功能
- ⑤ 隐藏任务功能
那么，我们就一起来开发把！
记事本涉及知识：
① 列表结构可以通过v-for指令结合数据生成
② v-on结合事件修饰符可以对事件进行限制，比如.enter
③ v-on在绑定事件时可以传递自定义参数
④ 通过v-model可以快速的设置和获取表单元素的值
⑤ 基于数据的开发方式
记事本完整版效果图展示：
3、模板展示
<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="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>加菲猫的记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
class="new-todo"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo">
<div class="view">
<span class="index">1.</span> <label>做一百道算法题</label>
<button class="destroy"></button>
</div>
</li>
<li class="todo">
<div class="view">
<span class="index">2.</span> <label>给女朋友买口红</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>1</strong> items left </span>
<button class="clear-completed">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="https://blog.csdn.net/weixin_42429718">
<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" alt="点击跳转到博主主页"/>
</a>
</p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
4、新增功能开发
- ① 生成列表结构（v-for 数组）
- ② 获取用户输入（v-model）
- ③ 回车，新增数据（v-on .enter添加数据）
<html>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>加菲猫的记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
class="new-todo" v-model="inputInfo" @keyup.enter="pushInfo"
/>
</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"></button>
</div>
</li>
</ul>
</section>
</section>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#todoapp",
data:{
list:["吃饭饭","睡觉觉","打豆豆"],
inputInfo:"请输入任务"
},
methods:{
pushInfo:function(){
this.list.push(this.inputInfo)
}
}
})
</script>
</body>
</html>
5、删除功能开发
- ① 点击删除内容（v-on splice 索引）
删除就是用数组的函数 splice(对应的索引,howmany删除多少个)
通过检查元素，找到我们那个小x的位置 绑定事件即可
<html>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 列表区域 -->
<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="spliceInfo(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>1</strong> items left </span>
<button class="clear-completed">
Clear
</button>
</footer>
</section>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#todoapp",
data:{
list:["吃饭饭","睡觉觉","打豆豆"],
inputInfo:"学如逆水行舟，不进则退"
},
methods:{
pushInfo:function(){
this.list.push(this.inputInfo)
},
spliceInfo:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
5、统计功能开发
- ① 统计信息个数（v-text length）
核心地方就是找到显示位置，然后通过length来获取list长度即可
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
<button class="clear-completed">
Clear
</button>
</footer>
6、清空功能开发
- ① 点击清除所有信息（v-on）
核心地方就是找到clear按钮位置，然后通过清空方法将list清空掉即可
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
<button class="clear-completed" @click="clearInfo">
Clear
</button>
</footer>
clearInfo:function(){
this.list=[]
}
7、隐藏功能开发
- ① 当没有数据时，隐藏元素，让界面更加美观
这里两种隐藏方式，看个人对界面的感觉：
第一种，隐藏子标签：
<!-- 统计和清空 -->
<footer class="footer" >
<span class="todo-count" v-show="this.list.length!=0"> <strong>{{this.list.length}}</strong> items left </span>
<button class="clear-completed" @click="clearInfo" v-show="this.list.length!=0">
Clear
</button>
</footer>
第二种，隐藏父标签：
<!-- 统计和清空 -->
<footer class="footer" v-show="this.list.length!=0">
<span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
<button class="clear-completed" @click="clearInfo">
Clear
</button>
</footer>
8、结束语
至此，记事本开发就完毕了，你是不是对Vue更加了解了呢，注意一下，过程中的代码并非源代码，直接使用可能会出bug，只是展示了相关功能的部分核心代码，下面附上本次项目源代码：
链接：https://pan.baidu.com/s/15yo5v12myxt3zx2Jjt-MXg
提取码：u4e2
最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~
点击进入Vue❤学习专栏~
学如逆水行舟，不进则退