Vue 获取数据、事件对象、todolist

vue中在方法里获取data里的msg：this.msg 　　在微信小程序里this.data.msg

改变data里的msg：this.msg="改变后的msg"

可以通过list.push('数据')往list里面添加数据

事件对象

在执行方法的时候传入$event

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

可以获取坐标自定义属性获取dom等等

结合双向数据绑定实现todolist

 <input type="text" v-model="todo" @keydown='todoadd($event)'/>
 <button @click="todoadda()">增加</button>
  <br>
  <hr>
 <h2>进行中</h2>
 <ul>
   <li v-for="f,key in list4" v-if="!f.checked">
    <input type="checkbox" v-model="f.checked" @change="asd" >  {{f.title}} ----   <button @click="remvdata(key)">删除</button>
     </li>
 </ul>
 <br>
 <h2>已完成</h2>
 <ul>
   <li class="abde" v-for="f,key in list4" v-if="f.checked">
    <input type="checkbox" v-model="f.checked" @change="asd" >  {{f.title}} ----  <button @click="remvdata(key)">删除</button>
     </li>
 </ul>

todolist html

 data() {
    /*业务逻辑里面定义的数据*/
return {
        list4: [],
},mounted() {
    //生命周期函数！！
    var list4 = JSON.parse(localStorage.getItem("list4"));
    if (list4) {
      this.list4 = list4;
    }
  },methods: {
    //里面写方法
    asd() {
      localStorage.setItem("list4", JSON.stringify(this.list4));
    },

    todoadda() {
      this.list4.push({
        title: this.todo,
        checked: false
      });
      this.todo = "";
    localStorage.setItem("list4", JSON.stringify(this.list4));
    },
    todoadd(c) {
      if (c.keyCode == 13) {
        this.list4.push({
          title: this.todo,
          checked: false
        });
        this.todo = "";
       localStorage.setItem("list4", JSON.stringify(this.list4));
      }
    },
    remvdata(key) {
      this.list4.splice(key, 1);
      localStorage.setItem("list4", JSON.stringify(this.list4));
    },