做自行车网站应该注意什么,越秀网站建设优化,电商运营数据六大指标,浙江建设职业技术学院官方网站TodoList
Todo List#xff08;任务列表#xff09;是一个简单的Web应用程序示例#xff0c;用于管理任务、代办事项或清单。Vue.js 是一个非常适合构建这种类型应用程序的框架#xff0c;因为它提供了数据绑定、组件化、响应式和轻松管理用户界面的能力。
以下是一个基本…TodoList
Todo List任务列表是一个简单的Web应用程序示例用于管理任务、代办事项或清单。Vue.js 是一个非常适合构建这种类型应用程序的框架因为它提供了数据绑定、组件化、响应式和轻松管理用户界面的能力。
以下是一个基本的Vue.js Todo List的示例
任务列表显示在Vue.js中你可以使用数据绑定来动态渲染任务列表。任务列表通常以一个数组的形式存在Vue.js会帮助你将这个数组与界面上的任务列表元素绑定起来。添加任务用户可以通过输入框输入新任务并点击“添加”按钮或按下回车键来将任务添加到列表中。Vue.js的事件绑定功能可以帮助你监听用户的操作。标记任务完成通常每个任务都有一个复选框或其他方式来标记是否完成。Vue.js可以帮助你实现这一功能并在任务状态发生变化时更新界面。删除任务用户可以通过点击删除按钮来删除任务。Vue.js的事件处理程序可以监听点击事件并在任务被删除时更新任务列表。过滤任务有时用户希望能够按状态已完成、未完成或其他条件过滤任务列表。Vue.js可以帮助你实现这一功能通过过滤和排序任务数组来呈现不同的视图。本地存储为了确保用户的任务在页面刷新后不会丢失你可以使用浏览器本地存储技术如localStorage来将任务数据存储在用户的浏览器中。
App.vue
templatediv idrootdiv classtodo-containerdiv classtodo-wrap!-- 编写组件标签头部组件 --MyHeader :addTodoaddTodo/MyHeader!-- 内容列表组件 --MyList :todostodos :checkTodocheckTodo:todoDeletetodoDelete/MyList!-- 下脚组件 --MyFooter :todostodos:checkAllTodocheckAllTodo:clearAllTodoclearAllTodo/MyFooter/div/div/div
/templatescript//引入组件import MyHeader from ./components/MyHeader.vue;import MyFooter from ./components/MyFooter.vue;import MyList from ./components/MyList.vue;export default {name:App,components:{MyHeader,MyFooter,MyList},data() {return {todos:[{id:001,title:吃饭,done:true},{id:002,title:睡觉,done:false},{id:003,title:学习,done:true},{id:004,title:抽烟,done:false},{id:005,title:喝酒,done:false},{id:006,title:开车,done:true}]}},methods:{// 添加一个todoaddTodo(todoObj){console.log(我是组件App我收到数据:,todoObj);//this.todos.push(x);//将数据加入数组中this.todos.unshift(todoObj);//将数据加入数组中},//勾选or取消一个todocheckTodo(id){// for (let index 0; index this.todos.length; index) {// if(this.todos[index].idid){// this.todos[index].done!this.todos[index].done;// }// }//使用forEach注意当foreach无法使用的使用可能是脚手架没有安装对应的js版本需要运行npm install core-js3.6.4名this.todos.forEach((todo){if (todo.idid) {todo.done!todo.done;}});},//删除一个todotodoDelete(id){//使用过滤器删除需要运行npm install core-js3.6.4命令才能使用filter过滤器this.todosthis.todos.filter((todo){return todo.id!id;});//传统的过滤删除方法// for (let index 0; index this.todos.length; index) {// if(this.todos[index].idid){// this.todos.pop(index);// }// }},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo){todo.donedone;});},//清除所有已经完成的todoclearAllTodo(){this.todosthis.todos.filter((todo){return !todo.done;});}}}
/scriptstyle/*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;}
/styleMyHeader.vue
templatediv classtodo-headerinput typetext placeholder请输入你的任务名称按回车键确认 v-modeltitle keyup.enteradd//div
/templatescriptimport {nanoid} from nanoidexport default {name:MyHeader,props:[addTodo],data() {return {title:}},methods:{add(){//校验数据if(!this.title){alert(数据不能为空);return;}//将用户的输入包装成一个todo对象const todoObj{id:nanoid(),title:this.title,done:false};//通知App组件去添加一个todo对象this.addTodo(todoObj);this.title;//清空输入}}}
/scriptstyle 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);}
/styleMyItem.vue
templatedivlilabelinput typecheckbox :checkedtodo.done changehandleCheck(todo.id)/!-- 如下代码也能实现功能但不太推荐因为有点违反原则因为修改了props --!-- input typecheckbox v-modeltodo.done/ --span{{todo.title}}/span/labelbutton classbtn btn-danger clickhandleDelete(todo.id)删除/button/li/div
/templatescriptexport default {name:MyItem,//声明接收todo对象props:[todo,checkTodo,todoDelete],methods:{// 勾选or取消勾选handleCheck(id){this.checkTodo(id);},//删除一个todohandleDelete(id){if(confirm(确定删除吗?)){this.todoDelete(id);}}}}
/scriptstyle 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:hover{background-color: #ddd;}li:hover button{display: block;}
/styleMyList.vue
templatedivul classtodo-main!-- 记录详情组件 --MyItem v-fortodoObj in todos :keytodoObj.id :todotodoObj:checkTodocheckTodo:todoDeletetodoDelete/MyItem/ul/div
/templatescriptimport MyItem from ./MyItem.vueexport default {name:MyList,components:{MyItem},props:[todos,checkTodo,todoDelete]}
/scriptstyle 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;}
/styleMyFooter.vue
templatediv classtodo-footer v-iftotallabelinput typecheckbox v-bind:checkedisAll clickcheckAll//labelspanspan已完成{{doneTotal}}/span / 全部{{total}}/spanbutton classbtn btn-danger clickclearAll清除已完成任务/button/div
/templatescriptexport default {name:MyFooter,props:[todos,checkAllTodo,clearAllTodo],// 计算属性computed:{//完整书写方式total:function(){return this.todos.length;},//计算属性的简写方式doneTotal() {//原始的统计方法// let count0;// for (let index 0; index this.todos.length; index) {// if (this.todos[index].done) {// count;// }// }// return count;//使用原型的reduce条件统计方法第一个参数为函数体第二个为统计开始值const countthis.todos.reduce((pre,todo){return pre(todo.done? 1 : 0);},0);return count;},isAll(){return this.doneTotalthis.totalthis.total0;//计算属性是可以嵌套的}},methods:{checkAll(event){console.log(event.target.checked);this.checkAllTodo(event.target.checked);},clearAll(){this.clearAllTodo();}}}
/scriptstyle 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浏览器本地存储
浏览器本地存储是一种在用户的本地浏览器中存储数据的机制以便在后续访问同一网站或应用程序时能够更快地加载和显示内容同时也可以用于在会话之间保持数据。常见的浏览器本地存储技术包括 CookiesCookieCookies 是一种小型文本文件可以存储在用户的计算机上。它们通常用于存储少量的数据如用户登录信息、会话标识等。Cookies 可以在服务器和浏览器之间传递数据但存储容量有限通常不超过4KB。 Web StorageWeb Storage 提供了两种存储数据的方式localStorage 和 sessionStorage。 localStorage用于长期存储数据数据在浏览器关闭后仍然保留。sessionStorage用于临时会话数据存储数据在会话结束后被清除。 IndexedDBIndexedDB 是一种低级别的数据库系统允许你在浏览器中存储大量结构化数据。它提供了强大的查询和事务支持并适用于需要离线访问或较大数据集的应用程序。 Cache APICache API 是一个用于存储和检索网络请求和响应的浏览器缓存系统。它允许开发者明确地控制哪些资源被缓存以及缓存的生命周期通常用于提高网页性能和离线访问。 Service WorkerService Worker 是一个在浏览器后台运行的脚本它可以拦截和处理网络请求实现高级的缓存策略包括离线访问和推送通知。它通常与Cache API一起使用。
这些本地存储技术允许开发者在浏览器中存储和管理数据以提高应用程序的性能、响应速度和离线访问能力。选择适当的本地存储技术通常取决于应用程序的需求和数据的类型。
需要注意的是由于本地存储是存储在用户计算机上的数据开发者需要处理数据的过期、清理以及安全性等问题以确保用户数据的完整性和隐私安全。
localStorage
!DOCTYPE html
html langenheadmeta charsetUTF-8titlelocalStorage/title/headbodyh2localStorage/h2button onclicksaveData()点我保存数据/buttonbutton onclickreadData()点我读取数据/buttonbutton onclickdeleteData()点我删除数据/buttonbutton onclickdeleteAllData()点我清空数据/buttonscript typetext/javascriptlet p {name:张三,age:18};console.log(p.toString());function saveData(){window.localStorage.setItem(msg,你好啊本地存储);//将数据存进浏览器的本地缓存中window.localStorage.setItem(msg2,666);window.localStorage.setItem(person,JSON.stringify(p));//将对象类型转成json字符串类型}function readData(){console.log(localStorage.getItem(msg));console.log(localStorage.getItem(msg2));let resultlocalStorage.getItem(person);console.log(JSON.parse(result));//将json字符串类型解析成object类型}function deleteData(){localStorage.removeItem(msg);//移除数据}function deleteAllData(){localStorage.clear();//清空数据}/script/body
/htmlsessionStorage
!DOCTYPE html
html langenheadmeta charsetUTF-8titlesessionStorage/title/headbodyh2sessionStorage/h2button onclicksaveData()点我保存数据/buttonbutton onclickreadData()点我读取数据/buttonbutton onclickdeleteData()点我删除数据/buttonbutton onclickdeleteAllData()点我清空数据/buttonscript typetext/javascriptlet p {name:张三,age:18};console.log(p.toString());function saveData(){window.sessionStorage.setItem(msg,你好啊本地存储);//将数据存进浏览器的本地缓存中window.sessionStorage.setItem(msg2,666);window.sessionStorage.setItem(person,JSON.stringify(p));//将对象类型转成json字符串类型}function readData(){console.log(sessionStorage.getItem(msg));console.log(sessionStorage.getItem(msg2));let resultsessionStorage.getItem(person);console.log(JSON.parse(result));//将json字符串类型解析成object类型}function deleteData(){sessionStorage.removeItem(msg);//移除数据}function deleteAllData(){sessionStorage.clear();//清空数据}/script/body
/html
