vue.js todolist实现代码

Vue.js TodoList应用实现详解

对于熟悉Vue.js的朋友来说，TodoList是一个非常实用的实践项目。下面，我们将一起如何使用Vue.js以及HTML5的本地存储LocalStorage来实现一个TodoList应用。

一、基础知识点

1. Vue.js基础知识：包括组件、指令、数据绑定、事件处理等。

2. HTML5本地存储LocalStorage：用于在浏览器中存储数据。

二、Store.js代码

我们首先需要创建一个Store.js文件来处理数据的存储和获取。这里我们使用了LocalStorage来存储Todo数据。

```javascript

const STORAGE_KEY = 'todos-vue.js';

export default {

fetch() {

return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');

},

save(items) {

window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));

}

}

```

在上述代码中，我们定义了一个常量`STORAGE_KEY`来标识我们要存储的数据的键名。`fetch`方法用于从LocalStorage中获取数据，如果没有数据则返回一个空数组。`save`方法则用于将数据保存到LocalStorage中。

三、App.vue代码

接下来，我们来看App.vue的代码。这个组件是TodoList应用的主要部分。

```html

```

在模板部分，我们创建了一个输入框用于输入新的Todo任务，以及一个列表用于显示所有的任务。每个任务都是一个`