vue的todolistDemo经典案例

1、用vue脚手架工具生成myproject项目

2、用webstorm软件来open打开

3、这里的/src目录下有App.vue和main.js

这里app是入口，app加载的helloworld.vue组件

4、现在我们直接从App.vue做文档

粘贴一下实现代码

App.vue

说明一下，具体就是有一个点击事件来转换class，实现下划线的样式改变用到的指令是

v-on:click="toggleFinish(item)

第二个就是通过watch监听items数组来实现localstorage的存取，实现了f5重新刷新页面是，list数组仍然存在

这里的两个方法是fetch和save

代码如下：

store.js

const STORAGE_KEY = 'todos-vuejs'
//这里的常量可以随意定义，其实就是localstorage的key，val是一个[]数组
export default {
  fetch() {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
    //第一次页面加载数组里面是空返回[],注意一定是windos，不是Windos，ws也不报错，一定要小心
  },
  save(items) {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
  }

}

然后在App.vue中improt store.js

import store from './store'

然后就可以直接调用了

store.fetch(), ws有提醒哟

5、最后总结一哈

这里我们使用到几个vue的常用指令和localstoeage的使用以及es6的简单调用组件，dotolist这个经典案例是vue官网的一个简单明了的案例，下一篇更加详细的说组件的使用以及组件的参数传递调用，刚接触的时候类比于iframe子父页面的传参交互，/狗头