Vue学习笔记1

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 } 模式添加侦听器