前端vue入手案例--记事本

分享一个用vue做的一个案例，这个案例结合了大多的vue的入门知识，包括有点击事件，数据双向绑定，v-for获取数据列表,v-if 页面元素显示方法等等。

学习这个案例也是能很好的帮助vue的学习者掌握一个很好的底层基础。然后就是在写vue知识的时候还顺便用了bootstrap来快速布局。

然后效果图图下：

记事本效果图

首先在效果上：

1. 数据列表：数据列表用于显示当前的记事内容，在文本框写下记事本的内容之后，点击确认或者按下回车键之后数据列表就会显示出你刚刚编辑好的结果。

2. 记事时间：用vue的new Date（）方法自动生成当前系统时间，因为vue生成的时间是国际时间，（例如生成：Wed Apr 15 2020 15:34:26 GMT+0800 (中国标准时间)，所以我这里用到了filter过滤器把时间的格式给格式化了。

3. 删除按钮：点击删除之后，vue就会把当前的这一个列表给删除掉。

4.全部删除按钮：点击clear按钮之后，vue就hi把当前全部的数据列表删除。

5. 记事记录：在写记事本的内容时，如果你当前一共写了3条记录，vue就会显示3个记事记录，当然，这个数值是动态传输的，它会根据数据的多少个记录显示。

在全局效果上，点击单个数据列表的删除按钮之后，数据列表会发生相应变化。并且记事记录，顺序列表也会发生变化，具体效果如图：

点击删除"吃饭"这一行数据之后的效果图

再之后。我把代码发出来，（大家代码仅作参考学习作用）

css代码

html代码

vue的代码

最后再大致概括下vue的知识点的实际应用：

1. 做好布局之后，步骤a: 先在data里自定义两个三个的数据，这个数据只是为了前期观看，不写也是可以的。步骤b：在第60行代码上，用v-for 指令在把data的数据给加载到，注意v-for 除了定义item内容外还可以应用index，因为index可以把数据的下标给显示出来，再因为下表从0开始，所以我在给index加上1（62行代码）。

2. 在时间上，vue的new Date（）方法自动生成当前系统时间，因为vue生成的时间是国际时间，（例如生成：Wed Apr 15 2020 15:34:26 GMT+0800 (中国标准时间)，所以我这里用到了filter过滤器把时间的格式给格式化了。因为时间函数考虑可能多次用到，所以用的是全局过滤器。具体的使用是首先用 new Date() 方法给获取到，然后再就是获取时间的年月日等时间就行了。（具体代码显示在91--105 行代码），在应用时间时，记得给时间先定义一个当前时间再用filter过滤器格式时间（115行代码）。

3. 再数据的双向绑定上，给input输入框绑定 v-model()指令（53行代码），再在data绑定v-model的一个空值（114行代码）

4.当数据全部清空后，因为此时数据为空，所以在用户体验上就用到了 v-if 指令把clear按钮给消失了（代码75行），当数据列表有一条或者更多时它就会重新显示出来了。

5. 在methods方法的定义上，定义add 添加数据方法（代码120行--128行），remove 删除单个数据列表的方法（代码130行--132行），clear 全部删除数据列表方法（代码134行--136行）。方法写好之后分别在按钮的行内嵌套使用即可。c例如clear方法的使用在代码75行

6. 在最后，为了提升用户体验感，输入完记事内容之后需要把input的value值给清空，因为input输入框已经用v-model数据双向绑定了，所以我们把这个v-model的值给赋予空值即可。（125行代码）

最后这么一个vue的案例也就完成了，当然一些 v-bind指令这里是没用上的，而v-show指令的话因为用了v-if所以也没用着。

这里再分享下学到的一个关于 v-show 和 v-if 知识点:

v-if指令: 指令直接操纵DOM元素也就是直接改变html元素，实际应用时，频繁操作显示与隐藏使用v-show指令，反之用v-if,因为使用v-if操纵DOM对性能的消耗比较大，使用v-show操纵的为display的none与block属性，这个对性能的消耗比较少。

最后，分享完毕，谢谢！

前端vue入手案例--记事本相关推荐

用Vue实现小黑记事本案例
用Vue实现小黑记事本案例实现内容代码介绍全部代码实现内容新增数据删除操作统计个数清空clear 隐藏在无数据时是隐藏状态代码介绍输入区域 <div id="re ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
【前端vue——系列6】vue连接摄像头并实现摄像头暂停，计时，截图到本地等功能
系列文章总结 [前端vue--系列1]vue的路由 [前端vue--系列2]vue中的data是函数而不是对象与computed的实现原理 [前端vue--系列3]vue框架的优缺点:vue实现双向绑 ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
Spring Boot笔记-get请求发送json数据（方便前端vue解析）
目录基本概念代码与实例基本概念这里有一个思路,后端只发送Json数据,前端vue去解析.这样的话,就可以做到前后端分离,耦合性就很低了. 代码与实例程序运行截图如下: 得到后,使用vue去解 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...

前端vue入手案例--记事本

分享一个用vue做的一个案例，这个案例结合了大多的vue的入门知识，包括有点击事件，数据双向绑定，v-for获取数据列表,v-if 页面元素显示方法等等。

前端vue入手案例--记事本相关推荐

最新文章

热门文章