外贸在什么网站做,域名查询中国万网,优化新十条,网站设计论文答辩问题文章目录 #x1f4da;Todo-list 案例#x1f407;组件化编码流程#xff08;通用#xff09;#x1f407;实现静态组件#x1f407;展示动态数据#x1f407;交互⭐️添加一个todo⭐️todo勾选实现⭐️删除功能实现⭐️底部统计功能实现⭐️底部全选功能实现⭐️底部一… 文章目录 Todo-list 案例组件化编码流程通用实现静态组件展示动态数据交互⭐️添加一个todo⭐️todo勾选实现⭐️删除功能实现⭐️底部统计功能实现⭐️底部全选功能实现⭐️底部一键清除功能实现 案例小结浏览器本地存储TodoList本地存储 学习链接尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通本文对应p70-p79博客参考尚硅谷公开笔记补充记录实操。 Todo-list 案例
组件化编码流程通用
实现静态组件抽取组件使用组件实现静态页面效果。展示动态数据 数据的类型、名称是什么数据保存在哪个组件 交互——从绑定事件监听开始。
实现静态组件 组件名不要和原有标签名冲突不管大小写例如Header开发中也一般不用MyHeaderVue鼓励采用UserHeade.vue类似命名。 注册好先搭结构链接好层级关系关注地址的正确链接 !-- App.vue --
scriptimport UserHeader from ./components/UserHeader.vueimport UserList from ./components/UserListimport UserFooter from ./components/UserFooterexport default {name:App,components:{UserHeader,UserList,UserFooter}}
/script!-- UserList.vue --
scriptimport UserItem from ../components/UserItemexport default {name:UserList,components:{UserItem}}
/script样式套用 先都放到App.vue里然后再拆先拆结构再拆样式。拆结构的时候App.vue里的结构剪切后要连带着补上标签防忘。拆样式的时候在特定vue对应样式可补上scoped放冲突。 展示动态数据
数据的类型、名称是什么 一堆数据用数组每个数据里的属性用对象。 数据保存在哪个组件 那个组件要展示就给谁即谁用给谁——UserList。【重要】链接上数据发送:demoxxx和接收props:[demo]。 UserList.vue关键部分templateul classtodo-mainUserItem v-fortodoObj in todos :keytodoObj.id :fasongtodoObj/UserItem/ul
/templatescriptimport UserItem from ../components/UserItem.vueexport default {name:UserList,components:{UserItem},data(){return{todos:[{id:001,title:吃早饭,done:true},{id:002,title:睡午觉,done:false},{id:003,title:散散步,done:true},]}}}
/scriptUserItem.vue关键部分templatelilabelinput typecheckbox :checkedfasong.done/span{{fasong.title}}/span/labelbutton classbtn btn-danger styledisplay:none删除/button/li
/templatescriptexport default {name:UserItem,// 声明接收发送内容props:[fasong]}
/script目前的设置是数据都放List且暂时还都合理。
交互
⭐️添加一个todo
id自动生成借助nanoid库 遇到的问题按暂时的知识量兄弟vueheader和list之间的数据传输很难办——解决办法把数据交给“爹”App.vue。具体通过爹提前给儿传一个函数props也可以传函数然后儿把数据借助函数传给爹实现。 UserList.vue关键部分 templateul classtodo-mainUserItem v-fortodoObj in todos :keytodoObj.id :fasongtodoObj/UserItem/ul
/templatescriptimport UserItem from ../components/UserItem.vueexport default {name:UserList,components:{UserItem},props:[todos]}
/scriptUserHeader.vue关键部分 templatediv classtodo-headerinput typetext placeholder请输入你的任务名称按回车键确认 keyup.enteradd//div
/templatescriptimport {nanoid} from nanoidexport default {name:UserHeader,props:[addTodo],methods:{add(e){// 将用户输入包装成为一个todo对象const todoObj {id:nanoid(),title:e.target.value,done:false}this.addTodo(todoObj)}}}
/scriptApp.vue关键部分 templatediv idrootdiv classtodo-containerdiv classtodo-wrapUserHeader :addTodoaddTodo/UserHeaderUserList :todostodos/UserListUserFooter/UserFooter/div/div/div
/template!-- App.vue --
scriptimport UserHeader from ./components/UserHeader.vueimport UserList from ./components/UserListimport UserFooter from ./components/UserFooterexport default {name:App,components:{UserHeader,UserList,UserFooter},data(){return{todos:[{id:001,title:吃早饭,done:true},{id:002,title:睡午觉,done:false},{id:003,title:散散步,done:true},]}},methods:{addTodo(todoObj){this.todos.unshift(todoObj)}}}
/script进一步完善添加完后输入框清空。add(e){// 将用户输入包装成为一个todo对象const todoObj {id:nanoid(),title:e.target.value,done:false}this.addTodo(todoObj)e.target.value
}进一步完善输入框必须有输入才能提交这里不借助event而是通过v-model完成数据读取。templatediv classtodo-headerinput typetext placeholder请输入你的任务名称按回车键确认 v-modeltitle keyup.enteradd//div
/templatescriptimport {nanoid} from nanoidexport default {name:UserHeader,props:[addTodo],methods:{add(){// 校验数据if(!this.title) return alert(输入不能为空)// 将用户输入包装成为一个todo对象const todoObj {id:nanoid(),title:this.title,done:false}// 通知APP组件去添加一个todo对象this.addTodo(todoObj)// 清空输入this.title }}}
/script这时会出现以下警告而且清空失效。修改给title定义scriptimport {nanoid} from nanoidexport default {name:UserHeader,props:[addTodo],data(){return{title:}},methods:{add(){// 校验数据if(!this.title) return alert(输入不能为空)// 将用户输入包装成为一个todo对象const todoObj {id:nanoid(),title:this.title,done:false}// 通知APP组件去添加一个todo对象this.addTodo(todoObj)// 清空输入this.title }}}
/script其他注意点函数命名不能重复add、addtodo。
⭐️todo勾选实现
现在可以勾选但是vue实际的数据是没有变化的。 关键点 数据在哪关于数据的操作就在哪——在App.vue里定义函数。App.vue对Item.vue是爷爷对孙子的关系相关传输要先给他爸List.vue再由他爸给他现阶段。 UserItem.vue关键代码templatelilabelinput typecheckbox :checkedfasong.done changehandleCheck(fasong.id)/span{{fasong.title}}/span/labelbutton classbtn btn-danger styledisplay:none删除/button/li
/templatescriptexport default {name:UserItem,// 声明接收发送内容props:[fasong,checkTodo],methods:{handleCheck(id){// 通知App组件将对应的todo对象的done值取反this.checkTodo(id)}}}
/scriptUserList.vue关键代码templateul classtodo-mainUserItem v-fortodoObj in todos :keytodoObj.id :fasongtodoObj :checkTodocheckTodo/UserItem/ul
/templatescriptimport UserItem from ../components/UserItem.vueexport default {name:UserList,components:{UserItem},props:[todos,checkTodo]}
/scriptApp.vue关键代码templatediv idrootdiv classtodo-containerdiv classtodo-wrapUserHeader :addTodoaddTodo/UserHeaderUserList :todostodos :checkTodocheckTodo/UserListUserFooter/UserFooter/div/div/div/template!-- App.vue --
scriptimport UserHeader from ./components/UserHeader.vueimport UserList from ./components/UserListimport UserFooter from ./components/UserFooterexport default {name:App,components:{UserHeader,UserList,UserFooter},data(){return{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})}}}
/script用v-model实现就是在上一个功能实现的基础上忽略本功能实现的之前代码只将:checkedfasong.done改为v-modelfasong.done 但这里已经和视频有出入即vue版本更新后这个方法不可行会报错本质是props只读
⭐️删除功能实现
在Item里加一个鼠标悬浮效果li:hover{background-color: #ddd
}让删除按钮悬浮出现结构里的内联stylestyledisplay:none删掉添加悬浮条件前边默认设置为noneli:hover button{display: block;
}交互实现点击按钮拿到id把对应id的事件删除。 这里依旧注意函数名称设置问题不要用默认名称会混乱会报错依旧是App.vue对Item.vue是爷爷对孙子的关系相关传输要先给他爸List.vue再由他爸给他现阶段 UserItem.vue关键代码 templatelilabelinput typecheckbox :checkedfasong.done changehandleCheck(fasong.id)/span{{fasong.title}}/span/labelbutton classbtn btn-danger clickhandleDelete(fasong.id)删除/button/li
/templatescriptexport default {name:UserItem,// 声明接收发送内容props:[fasong,checkTodo,deleteTodo],methods:{// 勾选or取消勾选handleCheck(id){// 通知App组件将对应的todo对象的done值取反this.checkTodo(id)},// 删除handleDelete(id){if(confirm(确定删除吗)){// 通知App组件删除this.deleteTodo(id)}}}}
/scriptUserList.vue关键代码 templateul classtodo-mainUserItem v-fortodoObj in todos :keytodoObj.id :fasongtodoObj :checkTodocheckTodo:deleteTododeleteTodo/UserItem/ul
/templatescriptimport UserItem from ../components/UserItem.vueexport default {name:UserList,components:{UserItem},props:[todos,checkTodo,deleteTodo]}
/scriptApp.vue关键代码 templatediv idrootdiv classtodo-containerdiv classtodo-wrapUserHeader :addTodoaddTodo/UserHeaderUserList :todostodos :checkTodocheckTodo :deleteTododeleteTodo/UserListUserFooter/UserFooter/div/div/div/template!-- App.vue --
scriptimport UserHeader from ./components/UserHeader.vueimport UserList from ./components/UserListimport UserFooter from ./components/UserFooterexport default {name:App,components:{UserHeader,UserList,UserFooter},data(){return{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){// return todo.id ! id// })// 精简写法this.todos this.todos.filter(todo todo.id ! id)}}}
/script⭐️底部统计功能实现
把todos传给Footer在App.vue添加UserFooter :todostodos/UserFooter。UserFooter.vue 读取todos.length作为全部数值显示。计算属性算done为true的数量。 templatediv classtodo-footerlabelinput typecheckbox//labelspanspan已完成{{doneTotal}}/span / 全部{{todos.length}}/spanbutton classbtn btn-danger清除已完成任务/button/div
/templatescriptexport default {name:UserFooter,props:[todos],computed:{doneTotal(){// 法一// let i 0// this.todos.forEach((todo){// if(todo.done) i// })// return i// 法二return this.todos.reduce((pre,current) pre (current.done ? 1 : 0),0)}}}
/script⭐️底部全选功能实现
考虑实际情境的细节优化。同样也是对todos的操作写到App.vue。App.vue关键代码templatediv idrootdiv classtodo-containerdiv classtodo-wrapUserHeader :addTodoaddTodo/UserHeaderUserList :todostodos :checkTodocheckTodo :deleteTododeleteTodo/UserListUserFooter :todostodos :checkAllTodocheckAllTodo/UserFooter/div/div/div/template!-- App.vue --
scriptimport UserHeader from ./components/UserHeader.vueimport UserList from ./components/UserListimport UserFooter from ./components/UserFooterexport default {name:App,components:{UserHeader,UserList,UserFooter},data(){return{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){// return todo.id ! id// })// 精简写法this.todos this.todos.filter(todo todo.id ! id)},// 全选or取消全选checkAllTodo(done){this.todos.forEach((todo){todo.done done})}}}
/scriptUserFooter.vue关键代码templatediv classtodo-footer v-showtotallabelinput typecheckbox :checkedisAll changecheckAll//labelspanspan已完成{{doneTotal}}/span / 全部{{total}}/spanbutton classbtn btn-danger清除已完成任务/button/div
/templatescriptexport default {name:UserFooter,props:[todos,checkAllTodo],computed:{total(){return this.todos.length},doneTotal(){// 法一// let i 0// this.todos.forEach((todo){// if(todo.done) i// })// return i// 法二return this.todos.reduce((pre,current) pre (current.done ? 1 : 0),0)},isAll(){return this.doneTotal this.total this.total 0}},methods:{checkAll(e){this.checkAllTodo(e.target.checked)}}}
/script优化UserFooter.vue借助v-model及计算属性之前v-model失效是因为绑到props了。templatediv classtodo-footer v-showtotallabelinput typecheckbox v-modelisAll//labelspanspan已完成{{doneTotal}}/span / 全部{{total}}/spanbutton classbtn btn-danger清除已完成任务/button/div
/templatescriptexport default {name:UserFooter,props:[todos,checkAllTodo],computed:{total(){return this.todos.length},doneTotal(){return this.todos.reduce((pre,current) pre (current.done ? 1 : 0),0)},isAll:{get(){return this.doneTotal this.total this.total 0},set(value){this.checkAllTodo(value)}}}}
/script⭐️底部一键清除功能实现
App.vue部分templatediv idrootdiv classtodo-containerdiv classtodo-wrapUserHeader :addTodoaddTodo/UserHeaderUserList :todostodos :checkTodocheckTodo :deleteTododeleteTodo/UserListUserFooter :todostodos :checkAllTodocheckAllTodo :clearAllTodoclearAllTodo/UserFooter/div/div/div/template!-- App.vue --
scriptimport UserHeader from ./components/UserHeader.vueimport UserList from ./components/UserListimport UserFooter from ./components/UserFooterexport default {name:App,components:{UserHeader,UserList,UserFooter},data(){return{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){// return todo.id ! 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})}}}
/scriptUserFooter.vue部分templatediv classtodo-footer v-showtotallabelinput typecheckbox v-modelisAll//labelspanspan已完成{{doneTotal}}/span / 全部{{total}}/spanbutton classbtn btn-danger clickclearAll清除已完成任务/button/div
/templatescriptexport default {name:UserFooter,props:[todos,checkAllTodo,clearAllTodo],computed:{total(){return this.todos.length},doneTotal(){return this.todos.reduce((pre,current) pre (current.done ? 1 : 0),0)},isAll:{get(){return this.doneTotal this.total this.total 0},set(value){this.checkAllTodo(value)}}},methods:{clearAll(){this.clearAllTodo()}}}
/script案例小结 组件化编码流程 拆分静态组件组件要按照功能点拆分命名不要与html元素冲突。实现动态组件考虑好数据的存放位置数据是一个组件在用还是一些组件在用 一个组件在用放在组件自身即可。一些组件在用放在他们共同的父组件上状态提升。 实现交互从绑定事件开始。 props适用于 父组件 子组件 通信子组件 父组件 通信要求父先给子一个函数 使用v-model时要切记v-model绑定的值不能是props传过来的值因为props是不可以修改的
浏览器本地存储 浏览器的搜索历史就是借助了本地存储。 存储内容大小一般支持5MB左右不同浏览器可能还不一样 浏览器端通过 Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 相关API xxxxxStorage.setItem(key, value);该方法接受一个键和值作为参数会把键值对添加到存储中如果键名存在则更新其对应的值。xxxxxStorage.getItem(person);该方法接受一个键名作为参数返回键名对应的值。xxxxxStorage.removeItem(key);该方法接受一个键名作为参数并把该键名从存储中删除。xxxxxStorage.clear()该方法会清空存储中的所有数据。 备注 SessionStorage存储的内容会随着浏览器窗口关闭而消失。LocalStorage存储的内容需要手动清除才会消失。xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到那么getItem的返回值是null。JSON.parse(null)的结果依然是null。 localStorage.html!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlelocalStorage/title/headbodyh2localStorage/h2button onclicksaveData()点我保存一个数据/buttonbutton onclickreadData()点我读取一个数据/buttonbutton onclickdeleteData()点我删除一个数据/buttonbutton onclickdeleteAllData()点我清空一个数据/buttonscript typetext/javascript let p {name:张三,age:18}function saveData(){localStorage.setItem(msg,hello!!!)localStorage.setItem(msg2,666)localStorage.setItem(person,JSON.stringify(p))}function readData(){console.log(localStorage.getItem(msg))console.log(localStorage.getItem(msg2))const result localStorage.getItem(person)console.log(JSON.parse(result))}function deleteData(){localStorage.removeItem(msg2)}function deleteAllData(){localStorage.clear()}/script/body
/html**localStorage.html**即对应部分API换成sessionStorage
TodoList本地存储
目的自添加事项刷新后不清除。在App.vue添加watch同时data里配套读取export default {name:App,components:{UserHeader,UserList,UserFooter},data(){return{todos:JSON.parse(localStorage.getItem(todos)) || []}},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){// return todo.id ! 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})}},watch:{todos:{// 开启深度监视deep:true,handler(value){localStorage.setItem(todos,JSON.stringify(value))}}}
}刷新后不清除
