VueTodoList案例---脚手架基础案例示意

佚名 2024-05-06 13:40:56 举报

篇首语：本文由小编为大家整理，主要介绍了VueTodoList案例---脚手架基础案例示意相关的知识，希望对你有一定的参考价值。

欢迎学习交流！！！
持续更新中…

文章目录

TodoList案例
总结TodoList案例

TodoList案例

结果演示：

main.js文件：

//引入Vueimport Vue from "vue"//引入Appimport App from "./App.vue"//关闭Vue的生产提示Vue.config.productionTip = false//创建vmnew Vue(el:"#app",render: h => h(App))

App.vue文件：

<template><p id="root"><p class="todo-container"><p class="todo-wrap"><MyHeader :addTodo="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>p>p>p>template><script>import MyHeader from "./components/MyHeader"import MyList from "./components/MyList"import MyFooter from "./components/MyFooter.vue"export default name:"App",components:MyHeader,MyList,MyFooter,data() return //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）todos:[id:"001",title:"抽烟",done:true,id:"002",title:"喝酒",done:false,id:"003",title:"开车",done:true],methods: //添加一个todoaddTodo(todoObj)this.todos.unshift(todoObj),//勾选or取消勾选一个todocheckTodo(id)this.todos.forEach((todo)=>if(todo.id === id) todo.done = !todo.done),//删除一个tododeleteTodo(id)this.todos = this.todos.filter( todo => todo.id !== id ),//全选or取消全选checkAllTodo(done)this.todos.forEach((todo)=>todo.done = done),//清除所有已经完成的todoclearAllTodo()this.todos = this.todos.filter((todo)=>return !todo.done)script><style>/*base*/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>

components文件夹：

1.MyHeader.vue文件<template><p class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>p>template><script>import nanoid from "nanoid"export default name:"MyHeader",//接收从App传递过来的addTodoprops:["addTodo"],data() return //收集用户输入的titletitle:"",methods: add()//校验数据if(!this.title.trim()) return alert("输入不能为空")//将用户的输入包装成一个todo对象const todoObj = id:nanoid(),title:this.title,done:false//通知App组件去添加一个todo对象this.addTodo(todoObj)//清空输入this.title = "",script><style scoped>/*header*/.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>2. MyList.vue文件<template><ul class="todo-main"><MyItem v-for="todoObj in todos":key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo":deleteTodo="deleteTodo"/>ul>template><script>import MyItem from "./MyItem"export default name:"MyList",components:MyItem,//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的props:["todos","checkTodo","deleteTodo"]script><style scoped>/*main*/.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>3. MyItem.vue文件<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><span>todo.titlespan>label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除button>li>template><script>export default name:"MyItem",//声明接收todo、checkTodo、deleteTodoprops:["todo","checkTodo","deleteTodo"],methods: //勾选or取消勾选handleCheck(id)//通知App组件将对应的todo对象的done值取反this.checkTodo(id),//删除handleDelete(id)if(confirm("确定删除吗？"))//通知App组件将对应的todo对象删除this.deleteTodo(id),script><style scoped>/*item*/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:hoverbackground-color: #ddd;li:hover buttondisplay: block;style>4. MyFooter.vue文件<template><p class="todo-footer" v-show="total"><label><input type="checkbox" v-model="isAll"/>label><span><span>已完成doneTotalspan> / 全部totalspan><button class="btn btn-danger" @click="clearAll">清除已完成任务button>p>template><script>export default name:"MyFooter",props:["todos","checkAllTodo","clearAllTodo"],computed: //总数total()return this.todos.length,//已完成数doneTotal()//此处使用reduce方法做条件统计/* const x = this.todos.reduce((pre,current)=>console.log("@",pre,current)return pre + (current.done ? 1 : 0),0) *///简写return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0),//控制全选框isAll://全选框是否勾选get()return this.doneTotal === this.total && this.total > 0,//isAll被修改时set被调用set(value)this.checkAllTodo(value),methods: /* checkAll(e)this.checkAllTodo(e.target.checked) *///清空所有已完成clearAll()this.clearAllTodo(),script><style scoped>/*footer*/.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>

总结TodoList案例

1、组件化编码流程：

拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

2). 一些组件在用：放在他们共同的父组件上（状态提升）。
实现交互：从绑定事件开始。

2、props适用于：

父组件 ==> 子组件通信
子组件 ==> 父组件通信（要求父先给子一个函数）

3、使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4、props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

以上是关于VueTodoList案例---脚手架基础案例示意的主要内容，如果未能解决你的问题，请参考以下文章