localStorage:本地存储
sessionStorage:会话存储,会话关闭后数据丢失
1. 数组的基本操作:
todos.unshift() 在数组的开头添加新元素
todos.shift() 删除数组的第一个元素
todos.push ()在数据的末尾添加新元素
todos.pop() 删除数组的最后一个元素
todos.reverse() 元素的顺序反转排序
todos.splice() 从某个位置开始添加元素
todos.slice()从数组中截取几个元素
2. watch: 深度监视(deep:true)可以看到对象内部的变化,否则只能看到对象的变化
data(){
return{
todos:JSON.parse(localStorage.getItem("todos"))||[],
}
},
methods:{
//添加一个todo
addTodo(todoObj){
this.todos.unshift(todoObj)
},
//取消勾选一个todo
checkTodo(id){
this.todos.forEach((todo)=>{
if (todo.id === id) todo.done = !todo.done
})
},
//删除
deleteTodo(id){
this.todos = this.todos.filter(todo=>todo.id !==id)
},
//全选or取消全选
checkAllTodo(done){
this.todos.forEach(todo=>todo.done=done)
},
clearAllTodo(){
this.todos = this.todos.filter(todo=>!todo.done)
}
},
watch:{
todos:{
//深度监测,可以看到对象内的变化,否则只能看到对象的变化
deep:true,
handler(value){
localStorage.setItem('todos', JSON.stringify(value))
}
}
}
};
3. v-on 简写@
绑定事件监听器。事件类型由参数指定。
修饰符:
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器