精华内容
下载资源
问答
  • vue待办事项
    2022-05-06 21:08:12

    效果图

    在这里插入图片描述

    首先HTML部分代码

    <div id="app">
            <h1>待办事项</h1>
            <ul>
                <li v-for="(thing,index) in things">
                    <input type="checkbox" v-model="thing.state"/>
                    <span v-bind:class="{text: thing.state}">{{thing.sth}}</span>  
                
            </ul>
            <input type="text" v-model="input" value="input"/>
            <button @click="add">添加</button>
        </div>
    

    通过 v-for循环渲染列表
    用v-model双向绑定checkbox是否被选中 主要是通过点击页面获取checked 布尔值 若使用v-bind 则无法从获取用户的输入事件以更新数据

    v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

    v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

    text 和 textarea 元素使用 value property 和 input 事件;
    checkbox 和 radio 使用 checked property 和 change 事件;
    select 字段将 value 作为 prop 并将 change 作为事件。

    通过v-model监听input的value值,通过@click事件添加

    js代码

     new Vue({
                el: '#app',
                data: {
                    things: [],
                    input: '',
                    change: {
                        text: false
                    }
                },
                methods: {
                    add(){
                        //push方法传递多个数据 储存布尔值
                        if(this.input.trim()===""||this.input===null||this.input===undefined){
                            console.log(this.input)
                            alert("请重新填写")
                        }
                        else{
                            console.log(this.input)
                            this.things.push({
                                state:false,
                                sth: this.input
                            })
                        }
                        this.input ="";//输入完后清空输入框
                    },
                },
    

    这里还对添加的内容做了判断,无法添加null、” “和undefined
    这里通过js的push方法添加的things数组中,这里要将每个thing的是否被选中的布尔值储存起来,用于判断是否被选中来添加css样式

    更多相关内容
  • 技术测试Vue待办事项列表 应用概述 以可读的方式列出待办事项,并显示优先级 优先将新项目添加到列表中 从列表中删除一个项目 清除整个清单 能够编辑现有项目 进入页面后保存到本地存储并重新加载 按优先级排序 单元...
  • vue_todo 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • vue.js添加待办事项样式特效是一款支持自定义创建和删除事项列表功能。
  • 基于vue, vuex, vue-router, vuetify, vue CLI3 搭建的一个简单的代办事项清单demo。 使用日历视图更好地管理代办事项。添加事项时,可以选择事项开始和结束的日期时间,事件将被添加到日历中对应的位置,可视化的...
  • 待办事项小项目-vue-js

    2019-02-20 17:26:20
    vue-todos是 todomvc vue模块的升级版本,界面简约,功能丰富,知道点全面,能帮您快速上手vuejs.喜欢的请点心,关注,star ,fork,这些是我坚持下去的动力!!
  • vue.js添加待办事项清单表单代码,一款基于vue.js创建待办事项列表表单ui模板。
  • Vue实例待办事项

    多人点赞 热门讨论 2022-05-16 16:57:48
    vue实现待办事项(技术: vue-cli,bulma,vuex)

    效果

    请添加图片描述

    实现

    1. 通过vue.cli脚手架创建项目
    2. 引入bulma库创建样式
    3. 引入vuex进行状态管理,最主要是向各个组件传输信息
    4. 使用时先下载.json中相关包npm i
    5. 输入npm start启动

    代码

    1. todoApp.vue
    <template>
      <div class="todoApp" style="width:500px">
        <article class="panel is-primary">
        <todo-head />
        <todo-input />
        <todo-list />
        <todo-foot />
        </article>
        </div>
    </template>
    
    <script>
    import TodoFoot from './componentsTodo/todo-foot.vue'
    import TodoHead from './componentsTodo/todo-head.vue'
    import todoInput from './componentsTodo/todo-input.vue'
    import TodoList from './componentsTodo/todo-list.vue'
    export default {
      components: { todoInput, TodoList, TodoFoot, TodoHead }, // 注册子组件
      name: 'todoApp'
    }
    </script>
    
    <style lang="less" scoped>
        .todoApp{
            margin: 20px auto;
        }
    </style>
    
    1. componentsTodo文件下todo-head.vue
     <template>
      <div class="todo-head">
        <div class="panel-heading">
            <p class="title is-1  has-text-danger">添加待办事项</p>
            <p class="subtitle is-3 has-text-danger">今日事,今日毕</p>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'todo-head'
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>
    
    1. componentsTodo文件下todo-list.vue
     <template>
      <div class="todo-list">
        <ul v-if="todos.length > 0">
            <todo-list-item v-for="todo in todos" :key="todo.id" :item="todo"/>
        </ul>
        <div v-else>请添加待办事项</div>
      </div>
    </template>
    
    <script>
    import todoListItem from './todo-list-item.vue'
    export default {
      components: { todoListItem },
      name: 'todo-list',
      computed: {
        todos () {
          return this.$store.state.todos // 拿到state中共享数据
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>
    
    1. componentsTodo文件下todo-list-item.vue
     <template>
      <div class="todo-list-item">
        <li>
            <label>
                <input
                type="checkbox"
                :checked="item.completed"
                @change="changeHandle"
                >
                <span>{{item.completed ? " 已" : " 未"}}完成&emsp;</span>
                <span>{{item.title}}&emsp;</span>
            </label>
            <button @click="delSingleHandle">删除</button>
        </li>
      </div>
    </template>
    
    <script>
    export default {
      name: 'todo-list-item',
      props: {
        item: {
          type: Object
        }
      },
      methods: {
        changeHandle () {
          this.$store.commit('changSingle', { id: this.item.id }) // 向store发送信息,触发mutations中changSingle事件,改变单选状态
        },
        delSingleHandle () {
          this.$store.commit('delSingle', { id: this.item.id }) // 向store发送信息,触发mutations中delSingle事件,删除单个代办事件
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
        li {
            margin-left: 10px;
        }
        li span{
            font-size: 30px;
        }
    </style>
    
    1. componentsTodo文件下todo-foot.vue
     <template>
      <div class="todo-foot">
        <label class="panel-inline">
        <input
        type="checkbox"
        :checked="checkboxAllStatus"
        @change="checkboxAllChang({statu: !checkboxAllStatus})"
        >
        全选
        </label>
        <span class="panel-inline">已完成{{CompletedTodo}}项 一共{{total}}项</span>
        <div class="panel-block">
        <button class="button is-primary is-outlined is-fullwidth" @click="clearAll">
        清空所有事项
        </button>
        </div>
      </div>
    </template>
    
    <script>
    import { mapGetters, mapMutations } from 'vuex' // 拿到vuex中的事件和计算属性(也就是store中的)
    export default {
      name: 'todo-foot',
      computed: {
        ...mapGetters(['total', 'CompletedTodo', 'checkboxAllStatus'])
        // 注释内容等同于上面。上面简写形式
        // total () {
        //   return this.$store.getters.total
        // },
        // CompletedTodo () {
        //   return this.$store.getters.CompletedTodo
        // },
        // checkboxAllStatus () {
        //   return this.$store.getters.checkboxAllStatus
        // }
      },
      methods: {
        ...mapMutations(['checkboxAllChang', 'clearAll'])
        // 注释内容等同于上面。上面简写形式
        // checkboxAllChang (event) {
        //   this.$store.commit('checkboxAllChang', { statu: event.target.checked })
        // },
        // clearAll () {
        //   this.$store.commit('clearAll')
        // }
      }
    }
    </script>
    
    <style lang="less" scoped>
    div{
        margin-top: 10px;
    }
    </style>
    
    1. main.js入口配置
     import Vue from 'vue'
    import App from './todoApp.vue'
    // 引入store
    import store from './store'
    
    // 引入bulma库
    import 'bulma/css/bulma.min.css'
    
    Vue.config.productionTip = false
    // Vue.prototype.$bus = new Vue()
    
    new Vue({
      store, // 注册store,这样就全局可用了
      render: h => h(App)
    }).$mount('#app')
    
    1. store下的index.js配置文件
     import Vue from 'vue'
    import Vuex from 'vuex'
    
    // 使用核心插件
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: { // 组件之间共享数据
        todos: []
      },
      getters: {
        /**
        * 计算一共多少事件
        */
        total (state) {
          return state.todos.length
        },
        /**
         * 计算已完成事件
         */
        CompletedTodo (state) {
          return state.todos.filter(item => item.completed).length
        },
        /**
         * 根据单选框计算全选框状态
         */
        checkboxAllStatus (state) {
          return state.todos.every(item => item.completed)
        }
      },
      mutations: {
        // 添加事件
        addTodoItem (state, payload) {
          state.todos.push({
            id: state.todos.length === 0 ? 0 : state.todos[state.todos.length - 1].id + 1,
            title: payload.title,
            completed: false
          })
        },
        /**
         * 单个选项框改变
         */
        changSingle (state, payload) {
          state.todos.forEach(item => {
            if (item.id === payload.id) {
              item.completed = !item.completed
            }
          })
        },
        /**
         * 删除单个事件
         */
        delSingle (state, payload) {
          state.todos = state.todos.filter(item => item.id !== payload.id)
        },
        // 总选框改变事件
        checkboxAllChang (state, payload) {
          state.todos.forEach(item => {
            item.completed = payload.statu
          })
        },
        // 清除所有代办事件
        clearAll (state) {
          state.todos = []
        }
      }
    })
    export default store
    
    1. package.json配置包
    {
      "name": "project-name",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "start": "npm run serve",
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "bulma": "^0.9.4",
        "core-js": "^3.8.3",
        "vue": "^2.6.14",
        "vue-router": "^3.5.3",
        "vuex": "^3.6.2"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "@vue/eslint-config-standard": "^6.1.0",
        "eslint": "^7.32.0",
        "eslint-plugin-import": "^2.25.3",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^5.1.0",
        "eslint-plugin-vue": "^8.0.3",
        "less": "^4.0.0",
        "less-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.14"
      }
     }
    
    展开全文
  • 《建设时事清单》 CORENTIN ANCEL Dans cet atelier,nous allon apprendreà...用法说明将待办事项清单放到待办事项列表中: 1.Créeret Initialiser Notre的主要作曲家TodoCard: Nommer le composant待办事项卡 创
  • vue实现待办事件列表

    2022-04-16 17:49:13
    创建一个待办事件列表实现待办事件的增删改以及选中功能
  • Vue-todolist
  • 待办事项案例,之后会一点点优化这个案例

    八、待办事项案例

    1、需求

    1. 输入待办事项回车添加到代办列表
    2. 鼠标移入待办事项列表项右侧出现删除按钮,可删除当前项
    3. 待办事项列表项左侧有勾选框,勾选表示以完成
    4. 待办列表下有统计(已办数量/待办数量)
    5. 统计前有勾选框,勾选表示全部完成(列表全部勾选,取消勾选也同步取消)
    6. 有已完成项后统计右侧出现删除按钮,可以删除已完成的任务

    2、功能组件划分示意图

    在这里插入图片描述


    3、CODE

    1、项目结构

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ecPX2oQT-1659622168400)(2_Vue-cli.assets/image-20220804215524911.png)]

    2、App.vue

    <template>
    	<div id="root">
    		<div class="todo-container">
    			<div class="todo-wrap">
    				<AddInput 
    					:receiveTask="receiveTask"
    				/>
    				<TodoList 
    					:todoList="todoList" 
    					:changeCheck="changeCheck" 
    					:deleteTask="deleteTask"
    				/>
    				<Collect 
    					:todoList="todoList" 
    					:checkAllOrNot="checkAllOrNot" 
    					:clearAllTaskDone="clearAllTaskDone"
    				/>
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    	import AddInput from './components/AddInput'
    	import TodoList from './components/TodoList'
    	import Collect from './components/Collect'
    	export default {
    		name:'App',
    		components: {
    			AddInput,
    			TodoList,
    			Collect
    		},
    		data() {
    			return{
    				todoList: [{
    					id: '001',
    					desc: '吃饭',
    					done: true
    				},{
    					id: '002',
    					desc: '睡觉',
    					done: true
    				},{
    					id: '003',
    					desc: '打豆豆',
    					done: false
    				}]
    			}
    		},
    		methods: {
    			// 接收要添加的任务并添加
    			receiveTask(task){
    				console.log('App组件收到了待办任务:', task)
    				this.todoList.unshift(task)
    			},
    			// 响应任务勾选
    			changeCheck(id){
    				console.log('App组件收到了任务状态改变通知,改变的任务id是:', id)
    				this.todoList.forEach(task => {
    					if(task.id === id){
    						task.done = !task.done
    						return
    					}
    				});
    				console.log('App组件处理了任务状态改变的结果:', this.todoList)
    			},
    			// 删除任务
    			deleteTask(id){
    				if(confirm('确定删除吗?')){
    					console.log('App组件收到了删除任务通知,删除的任务id是:', id)
    					// 只要key不出问题,替换整个对象完全不会影响Vue更新Dom的速度
    					this.todoList = this.todoList.filter(t => t.id !== id)
    				}
    			},
    			// checkAllOrNot
    			checkAllOrNot(done){
    				console.log('App组件收到了改变全部任务状态的通知,状态全部改为:', done)
    				this.todoList.forEach(task => {
    					task.done = done
    				});
    			},
    			// 清除已完成的任务
    			clearAllTaskDone(){
    				console.log('App组件收到了清理已完成的任务的命令')
    				this.todoList = this.todoList.filter(t => !t.done)
    			}
    		}
    	}
    </script>
    
    <style>
    	body {
    		background: #fff;
    	}
    	.btn {
    		display: inline-block;
    		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.05);
    		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>
    
    

    3、AddInput.vue

    <template>
    	<div class="todo-header">
    		<input type="text" :placeholder="placeholder" v-model="task" @keyup.enter="addTask"/>
    	</div>
    </template>
    
    <script>
    	// npm i nanoid 安装nanoid(精简版uuid)
    	import {nanoid} from 'nanoid'
    	export default {
    		name:'AddInput',
    		props: ['receiveTask'],
    		data() {
    			return{
    				task: '',
    				placeholder: '请输入你的任务名称,按回车键确认,空白无效'
    			}
    		},
    		methods: {
    			addTask(){
    				if(!!this.task.trim()){
    					// 处理数据
    					const newTask = {
    						id: nanoid(),
    						desc: this.task,
    						done: false
    					}
    					// console.log(newTask)
    					this.receiveTask(newTask)
    				}
    				this.task = ''
    			}
    		}
    	}
    </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>
    

    4、TodoList.vue

    <template>
    	<ul class="todo-main">
    		<TodoItem 
    			v-for="todo in todoList"
    			:key="todo.id" 
    			:todo="todo" 
    			:changeCheck="changeCheck"
    			:deleteTask="deleteTask"
    		/>
    	</ul>
    </template>
    
    <script>
    	import TodoItem from './TodoItem'
    	export default {
    		name:'TodoList',
    		components: {TodoItem},
    		props: ['todoList', 'changeCheck', 'deleteTask'],
    		data() {
    			return{
    
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	.todo-main {
    		margin-left: 0px;
    		border: 1px solid #ddd;
    		border-radius: 2px;
    		padding: 0px;
    	}
    
    	.todo-empty {
    		height: 40px;
    		line-height: 40px;
    		border: 1px solid #ddd;
    		border-radius: 2px;
    		padding-left: 5px;
    		margin-top: 10px;
    	}
    </style>
    

    5、TodoItem.vue

    <template>
    	<li>
    		<label>
    			<input type="checkbox" :checked="todo.done" @change="changeCheck(todo.id)"/>
    			<!-- 如下代码也能实现功能,但强烈不推荐,违反禁止修改父组件数据的原则,禁止修改props -->
    			<!-- Vue没报错的原因是你并没有改变todo的引用,如果是基本类型肯定咔咔报错 -->
    			<!-- <input type="checkbox" v-model="todo.done"/> -->
    			<span>{{todo.desc}}</span>
    		</label>
    		<button class="btn btn-danger" @click="deleteTask(todo.id)">删除</button>
    	</li>
    </template>
    
    <script>
    	export default {
    		name:'TodoItem',
            // 接收
            props: ['todo', 'changeCheck', 'deleteTask']
    	}
    </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: #ddd;
    	}
    	
    	li:hover button{
    		display: block;
    	}
    </style>
    

    6、Collect.vue

    <template>
    	<div class="todo-footer" v-show="todoList.length">
    		<label>
    			<!-- <input type="checkbox" :checked="isAll" @change="checkAllOrNot"/> -->
    			<!-- 这里为什么可以使用 v-model 进行修改?很明显,isCheckAll不是props接到的值,你懂得~ -->
    			<input type="checkbox" v-model="isCheckAll"/>
    		</label>
    		<span>
    			<span>已完成{{doneNum}}</span> / 全部{{todoList.length}}
    		</span>
    		<button class="btn btn-danger" @click="clearAllTaskDone">清除已完成任务</button>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'Collect',
    		props: ['todoList', 'checkAllOrNot', 'clearAllTaskDone'],
    		computed:{
    			doneNum(){
    				return this.todoList.filter(t=>t.done).length
    			},
    			isCheckAll: {
    				get(){
    					return this.todoList.length && this.todoList.length === this.doneNum
    				},
    				set(value){
    					this.checkAllOrNot(value)
    				}
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	.todo-footer {
    		height: 40px;
    		line-height: 40px;
    		padding-left: 6px;
    		margin-top: 5px;
    	}
    
    	.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>
    

    4、Result

    在这里插入图片描述


    5、总结

    1. 组件化编码流程
      1. 拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突
      2. 实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用
        1. 一个组件在用:放在组件自身即可
        2. 一些组件在用:放在他们共同的父组件上(状态提升)
      3. 实现交互:从绑定事件开始
    2. props适用于
      1. 父组件 ==> 子组件 通信
      2. 子组件 ==> 父组件 通信(要求父先给子一个函数)
    3. 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
    4. props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做
    展开全文
  • 基于VUE-CLI实现待办事项功能

    千次阅读 2022-06-04 15:24:39
    基于VUE-CLI实现代办事项功能

    基于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}
                    //把数据交给app
                    this.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实现ToDoList待办事项/清单

    千次阅读 2021-10-30 11:10:04
    1.在头部输入框内输入内容按回车键即可待办事项 2.单击待办项的前面选择框可实现未完成或已完成切换 3.双击待办内容可以修改里面的内容,修改完成后点击空白处或enter键都可实现修改,如果不想修改按Esc键可恢复...
  • Vue-todo-app项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build运行测试npm run test整理和修复文件npm run lint自定义配置请参阅。
  • 经典Vue待办事项

    2021-12-13 20:31:51
    经典代办事项
  • Vue待办清单

    2018-10-28 22:10:07
    用javascript一个很有名的框架写的,一个由中国人开发出来的框架VUE,具体用了HTML5,CSS3,javascript和Vue
  • vue-todo-app:待办事项列表应用程序。用Vue.js和顺风创建
  • vue 待办事项案列

    2020-07-03 16:48:19
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...待办事项列表</title> <style> .completed { text-decorati
  • Vue.js待办事项清单代码基于Vue.js 2.6.11制作,自定义添加新事项功能,事项删除功能。
  • TodoCalender日历表Reactnpm install @todo-calender/for-reactVue npm install @todo-calender/for-vue开发中
  • vue实现简单的待办事项清单

    千次阅读 2020-06-05 22:29:14
    初学vue的时候,做了一个待办事项清单。 首页 First.vue <template> <div id="app"> <div class="q">待办事项清单</div> <p class="e">不积跬步无以至千里</p> <hr ...
  • Vue 实现待办事项列表一、主要vue文件梳理App.vueToDoForm.vueToDoItem.vueToDoItemEditForm.vue二、要点总结 创建一个待办事件列表实现待办事件的增删改以及选中功能,项目源码查看 一、主要vue文件梳理 App.vue &...
  • 软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.已获高分通过项目。 软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.已获高分通过项目。软件工程毕业设计—基于...
  • 前言如果您所在公司有用过类似的todo list产品,那应该对其不是很陌生。todo list(待办事项列表),非常有名的todo list产品有Teambition,JIRA等等。...本次《todo list: Vue待办事项任务管理》,分为一下章节...
  • 待办事项清单:vue3

    2021-02-09 20:30:21
    待办事项清单
  • 需求案例说明:使用 Vue2模块化编程方式来实现下图的案例(样式是参照教程随便写的,这里以熟悉Vue2为主)项目结构:说明:Vue2支持模块化编程,一个 Vue后缀的文件表示一个Vue组件,其中通常包括 :1) HTML 代码,...
  • 待办事项清单待办事项清单-vue

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,546
精华内容 1,418
关键字:

vue待办事项