vue的简单用法

设计

image.png

1、输入框输入待做事件，回车之后展示在下面的列表里
2、已经完成的待做事件，下面会出现下划线。没有做完的事件则不会出现
3、点击未完成待做事件，则表示已经完成了这个事情，则下面会出现下划线。点击已完成事件，下划线消失，表示这个事情没有完成
4、刷新页面，这些待做的事情列表还能继续展现，而不能消失，这意味着需要把信息存储到浏览器上本地上

@keyup.enter 表示绑定回车事件
v-for：遍历
v-on:click：点击事件
:class：绑定css样式
v-model：将input值和vue双向绑定。即input值名为message

App.vue

Store.js

const STORAGE_KEY = 'todos-vuejs'
export default { //相当于输出匿名对象
    fetch:function (){
        //返回存储到客户端的localStorage的数据，若没有则返回[]
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY  || '[]') ) 
    },
    save:function (items){
        //存储内容到localStorage，并把数据转成json格式的string类型
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    }
}