位置: 编程技术 - 正文
使用Vue完成一个简单的todolist的方法(vue如何用)
编辑：rootadmin推荐整理分享使用Vue完成一个简单的todolist的方法(vue如何用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue如何用,vue项目使用rem,vue的简单使用,vue如何运行一个项目,vue如何用,使用vue写一个页面,用vue做一个简单的项目,vue如何用,内容如对您有帮助，希望把文章链接给更多的朋友！
看了两天的Vue，还是上手写一个简单的todolist更实用（文末有彩蛋）。
一、使用vue-cli脚手架快速搭建一个框架
利用vue-cli来自动生成我们项目的前端目录及文件，方法：
这样我们的一个基于webpack的vue项目目录就可以快速构建好了。
目录如下：
二、完成一个简单的todolist
接下来就看一下webpack.base.conf文件，这是核心文件，必须执行的文件，这里可以看到entry和output，这就是入口和输出路径，在入口处看到了./src/main.js，这就找到了界面的入口处了。在main.js中可以看到创建了一个vue实例，并加载了模板组件App.vue，所以我们的todo list代码就可以写在App.vue中。
简单的todolist我们可以完成这几个功能：
1、显示todo列表
2、判断列表任务完成状态，若完成则添加相应的样式
3、在输入框中动态添加todo项目，点击回车在列表中显示
4、点击相应的项目转换状态
首先我们完成显示列表的功能：
效果
export后面跟的对象，会作为 new Vue()的参数，来创建一个Vue的组件，并导出。
判断任务的完成状态，完成则添加text-decoration样式
官方文档中我们可以看到：
绑定class样式
如果v-bind中class后是一个对象的话，键代表添加的class的名称，value值代表一个布尔值，用来控制这个class属性的有无。所以我们就可以这样：
效果
在输入框中填写item，点击回车完成添加列表并显示同时清空input框内容
用到的知识：
监听回车
表单控件监听
点击内容进行状态转换
在li标签上绑定一个click事件，点击时修改isFinished
这样一个简单的todolist的基本功能已经完成。
动图效果
小彩蛋：linux下制作GIF动图
上网查找了很多办法，很多不适合linux平台，发现这个办法不错:
下载SimpleScreenRecoder软件：
三条命令：
安装好后你可以选择录制区域
参考资料：
Vue官方API文档：
Vue按需加载的具体实现 概念（懒加载）当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访
vue微信分享 vue实现当前页面分享其他页面 本文实例为大家分享了vue微信分享展示的具体代码，供大家参考，具体内容如下首先以分享给朋友为例1、先看官方文档wx.onMenuShareAppMessage({title:'',//分享
Angular之toDoList的实现代码示例 什么是todolist所谓的todolist就是把你所做的事情按顺序全部列出来，然后做完一件事，就在这一项之前打勾，此时状态就会变成已完成，todolist可以对所
标签: vue如何用
本文链接地址:https://www.jiuchutong.com/biancheng/378950.html 转载请保留说明！上一篇：Vue-Access-Control 前端用户权限控制解决方案
下一篇：js控制TR的显示隐藏(js控制display属性)
