vuejs+localStorage实现工作计划to-do-list

文章导航

Vue.js 的数据双向绑定和html5 localStorage 的数据存储功能实现一个自己的工作列表

演示所有代码仓库

vuejs+localStorage demo地址原始方式未组件化
vuejs+localStorage demo地址webpack打包组件化
vuejs+localStorage demo地址webpack打包组件化加删除功能
vuejs+localStorage demo原始方式未组件化加删除功能
vuejs-2.0+localStorage demo地址webpack打包组件化加删除功能
vuejs-2.0+localStorage demo原始方式未组件化加删除功能

vuejs-2.0+localStorage demo原始方式删除位移bug-add动画

功能需求分析
（1）input输入可以生成对应的列表内容（初始化为未完成）
（2）点击每个列表内容切换该工作计划的状态为完成还是未完成
（3）localStorage来存储我们输入的工作计划内容同步

效果

废话不多说上代码

css部分这个不用多说就没贴代码，看代码就看js部分和html结构部分，但是css中有个牛逼的属性见下css-code

v-cloak 作用在渲染的时候不出现，解析后再出现结果

1
2
3
[v-cloak]{
    display: none;
}

html结构部分

1
2
3
4
5
6
7
8
9
10
11
<div id="demo" class="reminder-container" v-cloak>
    <h1 v-text="title"></h1>
    <br/>
    <input type="text" v-model="newItem"  v-on:keyup.enter="newAdd" placeholder="enter输入" />
    <ul class="reminders">
      <li v-for="item in items" v-bind:class="{isFinshed:item.isFinshed}" v-on:click="toggleFinshed(item)">
        {{ item.label }} <span class="fr">{{item.isFinshed ? "完成" : "未完成" }}</span>
      </li>
    </ul>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var KEY = "workPlan";
var Store = {
    fetch: function() {
            return JSON.parse(localStorage.getItem(KEY) || '[]');//返回一个js对象
        },
    //将传入的data对象存下
    save: function(data) {
        localStorage.setItem(KEY, JSON.stringify(data));
    }
};

var vm=new Vue({
 el:'#demo',
 data: {
    title:"添加自己的工作计划(vue.js)",
    newItem:'',
    items:[
        { label: 'web前端', isFinshed: true },
        { label: 'Bar', isFinshed: false },
        { label: 'Foo', isFinshed: false },
        { label: 'Bar', isFinshed: true }
      ],
    items: [],
    items: Store.fetch()        
 },

 watch: {
    items: {
        handler: function (items) {
        Store.save(items);
        },
        deep: true
    }   
 },

  methods: {
    toggleFinshed: function (item) {
     item.isFinshed = !item.isFinshed
    },
    newAdd: function () {
     //console.log(this.newItem);
     this.items.push({
        label:this.newItem,
        isFinshed:false
     })
     this.newItem = '';

    }
  }

})

ps:注意点有以下几个部分
初始数据items: Store.fetch() 从localStorage 中读取若有v-for 循环 没有则为空数组
1.自己实现一个Store函数来操作输入数据
2.watch 监听数据改变 deep: true必须为这个 如果你有兴趣可以改为false试试 看看什么效果
3.toggleFinshed 函数切换状态 newAdd 增加新列 必须重新清空一次

写的可能很粗糙，文笔不好将就看吧

2016-10-25 vuejs-2.0 重写vue-to-do-listvuejs-2.0+localStorage demo地址webpack打包组件化加删除功能
有下面几个问题需要解决（对比以前的几个demo语法）

变动的地方
main.js
vue 2.0.xxx
import Vue from ‘vue’
import App from ‘./App’

/ eslint-disable no-new /
new Vue({
el: ‘#app’,
template: ‘‘,
components: { App }
})

// vue 1.0.xxx
// import Vue from ‘vue’
// import App from ‘./App’
//
// / eslint-disable no-new /
// new Vue({
// el: ‘body’,
// components: { App }
// })

1.v-for item 添加索引
2.删除通过索引删除而不是通过数组对象

vue.js 1.0.xx 语法

1
2
3
4
deleteClick (item) {
  this.show = false
  this.items.$remove(item)
}

1
2
3
4
5
6
   <li v-for='item in items'>
   //code
<p class='item-label' v-bind:class="{ 'line-through': item.checked }">{{ $index + 1 }}.{{ item.label }} </p>

<span class="del-confirm-sure" @click='deleteClick(item)'>删除</span>
</li>

vue.js 2.0.xx 语法 废弃的$remove
用 Array.prototype.splice 代替，例如：

methods: {
removeTodo: function (todo) {
var index = this.todos.indexOf(todo)
this.todos.splice(index, 1)
}
}
或者更好的方法，直接给除去的方法一个index参数：

methods: {
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}

1
2
3
4
deleteClick (index) {
  this.show = false
  this.items.splice(index, 1)
}

1
2
3
4
5
6
    <li v-for='(item, index) in items'>
   //code
<p class='item-label' v-bind:class="{ 'line-through': item.checked }">{{ index + 1 }}.{{ item.label }} </p>

<span class="del-confirm-sure" @click='deleteClick(index)'>删除</span>
</li>

##全选反选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 change () {
  if (!this.changecheck) {
    this.changecheck = true
    this.items.forEach((item) => item['checked'] = true )
    // this.items.forEach(function(item){
    //   item.checked = true
    // })
  } else {
    this.changecheck = false
    this.items.forEach((item) => item['checked'] = false )
    // this.items.forEach(function(item){
    //   item.checked = false
    // })
  }
}

版权声明： 本文章采用 知识共享署名 2.5 中国大陆许可协议 进行许可，欢迎转载，但转载请注明来自李立冬博客，并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文链接：http://www.lilidong.cn/2016/09/20/vuejs-localStorage实现工作计划to-do-list/

分享到： 更多