vue学习-03--使用vue制作简单的todolist

使用vue制作简单的todolist

• 点击在GitHub上查看demo
• 在data内创建数据合集

    data() {
        return {
        title: "this is a todo list",//标题
        items: [//tuod 事项数据合集
            {
            label: "coding",//事项
            isFinished: false//完成标志
            },
            {
            label: "walking",
            isFinished: true
            }
        ]
        };
    }

• 使用v-for 来渲染 事项
  
  • 根据 isFinished 来标记是否完成
• 通过 v-bind:class=”{finishend:item.isFinished}” 判断是否完成，为true时增加finishend类名效果完成的效果

    <ul>
      <li v-for="item in items" v-bind:class="{finishend:item.isFinished}">
        {{item.label}}
      </li>
    </ul>

• 使用v-on 绑定事件 实现点击完成/取消
• 在methods内注册方法，才能使用v-on绑定
  
  • 获取当前的isFinished，取反值

methods:{
       toggleFinish(item){
         console.log(item.isFinished=!item.isFinished);
       },
  }

• v-model 随表单控件类型不同而不同 在表单控件或者组件上创建双向绑定
  
  • 实现表单内数据的双向绑定

• v-on 修饰符

  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调

• 设置input触发回调事件 addNew 添加新的列表内

    addNew() {
      this.items.push({ 
          label: this.newItem, 
          isFinished: false 
          });
      this.newItem = "";//添加过新的事项之后，清空input内的数据
    }

• 利用localstorage来存储todolist数据
  
  • 封装函数，反复调用

const STORAGE_KEY = 'todos-vuejs'; //ES6定义常量，存储用来本地保存的 key 值
export default { //设置函数出口
  fetch() { //获取本地存储的数据，并转换json对象
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');
  },
  save(items) { //设置到本地存储，并将对象转换为json字符串
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
  }
}

• 在App.vue内引入封装好的函数

import store from "./store"; //调用封装好的函数

• 使用watch 检测items内的数据变化

    watch: {
        items: {//检测items数据发生变化
        handler(items) {//发生变化则会执行handler函数
            store.save(items);//调用本地存储，将更新后的数据存储到本地
        },
        deep: true//深度检测，当键值发生改变时都会执行
        }
    },

• 点击在GitHub上查看demo