vue.js todolist实现代码

案例知识点： 1.vue.js基础知识 2.HTML5 本地存储localstorage store.js代码 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)); } } App.vue代码 <template> 在本教程中，我们将探讨如何使用Vue.js框架创建一个简单的Todo List应用，并涉及Vue.js的基础知识以及HTML5的本地存储机制。我们要了解Vue.js的核心特性，它是一个轻量级的JavaScript库，用于构建用户界面，具有声明式的数据绑定和组件化功能。 **Vue.js基础知识** 1. **模板语法** - 在`App.vue`文件的`<template>`部分，我们看到Vue.js的模板语法。例如，`v-text`属性用于将数据绑定到元素的文本内容，`v-model`用于双向数据绑定，使输入框的值与Vue实例的属性同步，`v-on`用于监听事件，如`keyup.enter`用于监听回车键事件。 2. **组件化** - `App.vue`是一个Vue组件，它有自己的视图模板、数据和方法。组件是Vue.js中可复用的代码块，有助于保持代码的模块化和可维护性。 3. **数据绑定** - `v-model`用于在`newItem`和输入框之间进行双向绑定，`v-for`指令用于循环渲染列表，`v-bind`和`v-on`指令则分别用于属性绑定和事件监听。 4. **计算属性与监听器** - `watch`对象用于监听`items`数组的变化，当数组发生变化时，调用`Store.save()`保存更新到本地存储。 5. **方法** - Vue实例中定义的方法如`toogleFinish`和`addNew`用于处理用户交互，例如切换Todo项的完成状态和添加新Todo。 **HTML5本地存储** 在`store.js`文件中，我们使用了HTML5的`localStorage` API来持久化存储Todo List数据。 1. **存储数据** - `localStorage.getItem`用于获取存储的值，如果没有则返回`null`。这里使用`|| '[]'`来确保返回的是一个数组，即使之前没有存储过数据。 2. **保存数据** - 当Todo List的`items`数组发生变化时，通过`localStorage.setItem`将更新后的数组序列化为JSON字符串并存入`localStorage`，键名为`STORAGE_KEY`。 3. **数据读取与写入** - `fetch`函数负责从`localStorage`获取数据并将其转换为JSON对象，`save`函数则负责将数据保存回`localStorage`。 **样式** - 使用`<style>`标签添加CSS样式，如设置字体、文字对齐方式、颜色等，以及定义类`.finished`来给完成的Todo项添加下划线。 **总结** Vue.js的Todo List实现结合了Vue的基础特性和HTML5的本地存储功能，创建了一个可交互的应用。用户可以添加、删除Todo项，以及标记它们为已完成，所有这些操作都会实时保存到浏览器的本地存储中，以便在下次访问时恢复。这个案例展示了Vue.js如何优雅地处理数据绑定、组件化以及用户交互，同时也展示了如何利用HTML5的本地存储来实现离线应用的功能。