前端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属性，这个对性能的消耗比较少。

最后，分享完毕，谢谢！