基于VUE-CLI实现待办事项

前言

在没有VUEX和全局事件总线的情景下，采用了最原始的逐级传递的方式，实现了每一个VueComponent实例化对象之间的信息传递来完成这个功能

1 配置VUE脚手架

1.1 VUE脚手架的概念

VUE脚手架是VUE提供的标准化开发工具 , CLI为command line interface，直译过来就是命令行接口工具

1.2 初始化脚手架

1.2.1 全局安装

打开cmd输入

npm install -g @vue/cli

1.2.2 创建脚手架

切换到要创建项目的目录，然后命令创建项目

vue create xxxxx

1.2.3 启动项目

npm run serve

备注：

如果下载缓慢，在cmd里切换到npm淘宝镜像

npm config set registry https://registry.npm.taobao.org

2 通过集成开发环境打开脚手架

3.文件说明

这个文件夹是存放所有的vue组件的

app是所有组件的汇总，main.js文件则是整个项目的入口

public目录下的index.html则是整体的展现，在这设置了一个div容器

4.项目文件

首先打开app.vue文件输入下面代码

app.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><my-header :receive="receive"/><List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><my-footer :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>import MyHeader from "@/components/MyHeader";import MyFooter from "@/components/MyFooter";import List from "@/components/List";export default {name: 'App',components: {MyHeader,MyFooter,List,},data() {return {todos: [{id: '001', title: '吃饭', done: true},{id: '002', title: '睡觉', done: false},{id: '003', title: "喝水", done: true},]}},methods: {receive(todoObj) {this.todos.unshift(todoObj)},checkTodo(nid) {this.todos.forEach((todo) => {if (todo.id === nid) todo.done = !todo.done})},deleteTodo(nid) {this.todos = this.todos.filter((todo) => {return todo.id !== nid})},checkAllTodo(done) {this.todos.forEach((todo) => {todo.done = done})},clearAllTodo() {this.todos = this.todos.filter((todo) => {return !todo.done})}}}
</script><style>body {background-color: #fff;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.03);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

MyFooter.vue

<template><div class="todo-footer" v-show="total"><label><input type="checkbox" :checked="isAll" @click="checkAll"></label><span><span>已完成{{ doneTotal }}</span>  /全部{{ total }}</span><button class="btn btn-danger" @click="clearAll">清除已完成任务</button></div>
</template><script>export default {name: 'MyFooter',components: {},props: ['todos', 'checkAllTodo', 'clearAllTodo'],computed: {doneTotal() {return this.todos.reduce((pre, current) => pre + (current.done ? 1 : 0), 0)},total() {return this.todos.length},isAll() {return this.doneTotal === this.total && this.total > 0}},methods: {checkAll(event) {this.checkAllTodo(event.target.checked)},clearAll() {this.clearAllTodo()}}}
</script><style scoped>.todo-footer {height: 40px;line-height: 40px;padding-left: 20px;cursor: pointer;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入任务名称,回车确认" @keyup.enter="add"></div>
</template><script>import {nanoid} from 'nanoid'export default {name: 'MyHeader',data() {return {title: ""}},props: ['receive'],components: {},methods: {add(event) {//校验数据if (!event.target.value.trim()) return alert("输入不能为空")//包装用户的输入const todoObj = {id: nanoid(), title: event.target.value, done: false}//把数据交给appthis.receive(todoObj)//格式化输入this.title = ""}},}
</script><style scoped>.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

List.vue

<template><div><ul class="todo-main"><Item v-for="todoObj in todos" :key="todoObj.id" :todoObj="todoObj" :deleteTodo="deleteTodo":check-todo="checkTodo"/></ul></div>
</template><script>import Item from "@/components/Item";export default {name: 'List',components: {Item,},props: ["todos", "checkTodo", 'deleteTodo']}
</script><style scoped>.todo-main {margin-left: 0;border: 1px solid #ddd;border-radius: 2px;padding: 0;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

List.vue的子组件item.vue

<template><div><li><label><input type="checkbox" :checked="todoObj.done" @click="handCheck(todoObj.id)"/><span>{{ todoObj.title }}</span></label><button class="btn btn-danger" @click="handDelete(todoObj.id)">删除</button></li></div>
</template><script>export default {name: 'Item',components: {},props: ['todoObj', 'checkTodo', 'deleteTodo'],methods: {handCheck(nid) {//通知app组件done值取反this.checkTodo(nid)},handDelete(nid) {if (confirm('确定删除吗?')) {this.deleteTodo(nid)}}}}
</script><style scoped>li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover {background-color: darkgray;}li:hover button {display: block;}
</style>

5.项目运行

打开终端

输入

npm run serve

6.项目思路

基于VUE-CLI实现待办事项功能相关推荐

vue学习实现待办事项功能
下载vue.js的网址为:https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入代码实现 <!DOCTYPE h ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...
原生vue.js实现待办事项清单，支持增删改查
源码部分: <!DOCTYPE html> <html lang="en"> <head> ...
vue实现ToDoList待办事项/清单
1.这个功能运用的知识点比较多,computed计算,watch监听,directives自定义指令和methods定义事件,还有一些属性绑定,列表渲染,表单绑定指令,按键修饰符,表单修饰符等... ...
php实现待办事项功能,PHP倒计时和待办事项
我有几个问题.我需要每天17:00(下午5点)倒计时. 17:00之后,我想回复一条消息.然后,定时器需要在23.59之后复位.我怎样才能做到这一点与PHP?PHP倒计时和待办事项我的下一个问题是关 ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
基于vue 实现 excel导出导入功能
第一步下包 excel导入导出功能需要我们下载哪些包? 在vue-element-admin中有着详细的文档查看: Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js ...
vue项目通过命令行传参实现多环境配置(基于@vue/cli)
大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run ...

基于VUE-CLI实现待办事项功能