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>

 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));
    },