vue-基础项目-todolist实现
源代码地址:https://github.com/Lituzi/vue-miniProject-ToDoList
实现功能
- 在文本框输入后按enter添加待办事项
- 添加后显示在待办事项中
- 完成后勾选check框,从待办事项中移除,显示在已完成中
- 待办事项和已完成的计数功能
- 删除单条待办事项
- 按键clear清除所有事项
- 保存在本地localStorage中
vue实现
创建vue-cli脚手架项目
步骤
- npm install --global vue-cli
- vue init webpack my-project
- cd my-project
- npm install
- npm run dev
添加todolist组件
步骤
- 在components中创建一个新的组件toDoList
- 在全局中注册toDoList,并显示在当前首页面
<template>
<div id="app">
<to-do-list></to-do-list>
</div>
</template>
import ToDoList from './components/toDoList'
export default {
name: 'App',
components:{
ToDoList,
}}
- 可以在组件toDolist中添加h1标签测试效果
html静态界面实现
<div class="container">
<div class="head">
<h2>ToDoList</h2>
<input type="text" placeholder="添加ToDo">
<button>clear</button>
</div>
<div class="content">
<h2>待办事项
<span>0</span>
</h2>
<ol>
<li >
<input type="checkbox" >
<p>付水电费</p>
<a>-</a>