安徽建设厅网站证件查询,网站建设多少钱宋柯,小时seo,网站制作公司哪家价钱合理今天主要是做一个案例
TodoList
组件化编码流程#xff1a; 1. 拆分静态组件#xff1a;组件要按照功能点拆分#xff0c;命名不要与html元素冲突 2.实现动态组件#xff1a;考虑好数据的存放位置#xff0c;数据是一个组件在用#xff0c;还是一些组件在用#xff1a…今天主要是做一个案例
TodoList
组件化编码流程 1. 拆分静态组件组件要按照功能点拆分命名不要与html元素冲突 2.实现动态组件考虑好数据的存放位置数据是一个组件在用还是一些组件在用 1.一个组件在用放在组件自身即可 2.一些组件在用放在他们共同的父组件上状态提升 3.实现交互从绑定事件开始 props适用于 1.父组件 子组件 通信 2.子组件 父组件 通信要求父组件先给子组件一个函数 使用v-model时要切记v-model绑定的值不能是props传过来的值因为props是不可以修改的
props传过来的若是对象类型的值修改对象中的属性时Vue不会报错但不推荐这样做
主要是组件之间的交互
APP.vue
template
div idrootdiv classtodo-containerdiv classtodo-wrapMyHeaderVue :addTodoaddTodo/MyHeaderVueMyListVue :todostodos :checkTodocheckTodo :deleteTododeleteTodo/MyListVueMyFooterVue :todostodos :checkAllTodocheckAllTodo/MyFooterVue/div/div
/div/templatescript
import MyFooterVue from ./components/MyFooter.vue
import MyHeaderVue from ./components/MyHeader.vue
import MyListVue from ./components/MyList.vueexport default {name:App,components:{MyHeaderVue,MyFooterVue,MyListVue},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.idid) todo.done!todo.done})},//删除一个tododeleteTodo(id){this.todosthis.todos.filter((todo){return todo.id !id})},//全选or全不选checkAllTodo(done){this.todos.forEach((todo){todo.donedone})}}}
/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;
}
/*app*/
.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}/style
MyHeader.vue
templatediv classtodo-headerinput typetext placeholder请输入你的任务名称按回车键确认 v-modeltitle keyup.enteradd//div
/templatescript
import {nanoid} from nanoidexport default {name:MyHeader,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}},}
/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);
}
/style
MyList.vue
template
ul classtodo-mainMyItemVue v-fortodoObj in todos :keytodoObj.id :todotodoObj :checkTodocheckTodo :deleteTododeleteTodo/MyItemVue/ul/templatescript
import MyItemVue from ./MyItem.vueexport default {name:MyList,components:{MyItemVue},props:[todos,checkTodo,deleteTodo]
}
/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;
}
/style
MyItem.vue
templatelilabelinput typecheckbox :checkedtodo.done changehandleCheck(todo.id)/span{{todo.title}}/span/labelbutton classbtn btn-danger clickhandleDelete(todo.id) 删除/button/li
/templatescript
export default {name:MyItem,//声明接收todo对象props:[todo,checkTodo,deleteTodo],methods:{//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo.done取反this.checkTodo(id)},//删除handleDelete(id){if(confirm(确定删除吗)){this.deleteTodo(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;
}
/style
MyFooter.vue
templatediv classtodo-footer v-showtotallabelinput typecheckbox :checkedisAll changecheckAll //labelspanspan已完成{{doneTotal}}/span / 全部{{total}}/spanbutton classbtn btn-danger清除已完成任务/button/div
/templatescript
export default {name:MyFooter,props:[todos,checkAllTodo],computed:{total(){return this.todos.length},doneTotal(){return this.todos.reduce((pre,todo) pre (todo.done? 1:0),0)/**const xthis.todos.reduce((pre,current){return pre (current.done ?1:0)},0)*/},isAll(){return this.doneTotal this.total this.total0}},methods:{checkAll(e){this.checkAllTodo(e.target.checked)}}}
/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 本地存储
1.存储内容大小一般支持5MB左右不同浏览器可能还不一样
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
3.相关API 1.xxxStorage.setItem(key, value)该方法接受一个键和值作为参数会把键值对添加到存储中如果键名存在则更新其对应的值 2.xxxStorage.getItem(key)该方法接受一个键名作为参数返回键名对应的值 3.xxxStorage.removeItem(key)该方法接受一个键名作为参数并把该键名从存储中删除 4.xxxStorage.clear()该方法会清空存储中的所有数据 4.备注 1.SessionStorage存储的内容会随着浏览器窗口关闭而消失 2.LocalStorage存储的内容需要手动清除才会消失 3.xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到那么getItem()的返回值是null 4.JSON.parse(null)的结果依然是null
localStorage.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleloaclStorage/title
/head
bodyh2localStorage/h2button onclicksaveDate()点我保存一个数据/buttonbutton onclickreadDate()点我读取一个数据/buttonbutton onclickdeleteDate()点我删除一个数据/buttonbutton onclickdeleteAllDate()点我清空一个数据/buttonscript typetext/javascriptlet p{name:张三,age:18}function saveDate(){localStorage.setItem(msg,hello)localStorage.setItem(person,JSON.stringify(p))}function readDate(){console.log(localStorage.getItem(msg))const result localStorage.getItem(person)console.log(JSON.parse(result))}function deleteDate(){localStorage.removeItem(msg)}function deleteAllDate(){localStorage.clear()}/script
/body
/html
sessionStorage.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlesessionStorage/title
/head
bodyh2sessionStorage/h2button onclicksaveDate()点我保存一个数据/buttonbutton onclickreadDate()点我读取一个数据/buttonbutton onclickdeleteDate()点我删除一个数据/buttonbutton onclickdeleteAllDate()点我清空一个数据/buttonscript typetext/javascriptlet p{name:张三,age:18}function saveDate(){sessionStorage.setItem(msg,hello)sessionStorage.setItem(person,JSON.stringify(p))}function readDate(){console.log(sessionStorage.getItem(msg))const result sessionStorage.getItem(person)console.log(JSON.parse(result))}function deleteDate(){sessionStorage.removeItem(msg)}function deleteAllDate(){sessionStorage.clear()}/script
/body
/html TodoList 本地存储
在上面案例中进行一个优化使其添加一个本地存储的功能
template
div idrootdiv classtodo-containerdiv classtodo-wrapMyHeaderVue :addTodoaddTodo/MyHeaderVueMyListVue :todostodos :checkTodocheckTodo :deleteTododeleteTodo/MyListVueMyFooterVue :todostodos :checkAllTodocheckAllTodo/MyFooterVue/div/div
/div/templatescript
import MyFooterVue from ./components/MyFooter.vue
import MyHeaderVue from ./components/MyHeader.vue
import MyListVue from ./components/MyList.vueexport default {name:App,components:{MyHeaderVue,MyFooterVue,MyListVue},data(){return{todos:JSON.parse(localStorage.getItem(todos)) || []}},methods:{//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选or勾选取消一个todocheckTodo(id){this.todos.forEach((todo){if(todo.idid) todo.done!todo.done})},//删除一个tododeleteTodo(id){this.todosthis.todos.filter((todo){return todo.id !id})},//全选or全不选checkAllTodo(done){this.todos.forEach((todo){todo.donedone})}},watch:{todos:{deep:true,handler(value){localStorage.setItem(todos,JSON.stringify(value))}}},}
/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;
}
/*app*/
.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}/style
