vue-基础项目-todolist实现

vue-基础项目-todolist实现

源代码地址：https://github.com/Lituzi/vue-miniProject-ToDoList

实现功能

• 在文本框输入后按enter添加待办事项
• 添加后显示在待办事项中
• 完成后勾选check框，从待办事项中移除，显示在已完成中
• 待办事项和已完成的计数功能
• 删除单条待办事项
• 按键clear清除所有事项
• 保存在本地localStorage中

vue实现

创建vue-cli脚手架项目

步骤

1. npm install --global vue-cli
2. vue init webpack my-project
3. cd my-project
4. npm install
5. npm run dev

添加todolist组件

步骤

1. 在components中创建一个新的组件toDoList
2. 在全局中注册toDoList，并显示在当前首页面

   <template>
       <div id="app">
           <to-do-list></to-do-list>
        </div>
   </template>
   import ToDoList from './components/toDoList'
   export default {
   name: 'App',
   components:{
       ToDoList,
   }}
   

3. 可以在组件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>