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，并显示在当前首页面

   
   import ToDoList from './components/toDoList'
   export default {
   name: 'App',
   components:{
       ToDoList,
   }}
   

3. 可以在组件toDolist中添加h1标签测试效果

html静态界面实现

  

      

          
ToDoList
          
          clear
      
      

          
待办事项
              0
          
          

              

                  
                  
付水电费
                  -
              
              

                  
                  
付水电费
                  -
              
              

                  
                  
付水电费
                  -
              
              
          
          
已完成
              0
          
          

              

                  
                  
买水果
                  -
              
              

                  
                  
买水果
                  -
              
              

                  
                  
买水果
                  -
              
              
          
      

添加待办事项功能

1. 在组件data中添加todo，同时使用v-model在input上创建双向绑定，用来获取输入文本
2. 对input进行事件绑定，调用添加待办事项方法。
3. 添加待办事项方法思路
   1. 创建待办事项字面量，保存待办事项内容和待办事项状态
   2. 将待办事项保存在todoList数组中
   3. 使用todoLen对待办事项进行计数

事件绑定

数据项

  data () {
    return {
      todo:'',
      todoList:[],
      todoLen: 0,
    }
  },

方法实现

addTodo(){
    let todoObj = {
        todo:this.todo,
        done:false,
    }
    this.todoList.push(todoObj);
    this.todoLen++;
    this.todo = '';
},

显示待办事项

• 使用v-for遍历显示todoList数组内的数据
• 使用v-if显示未完成，即done为false值的待办事项

    
    
{{item.todo}}
    -

完成后勾选check框，从待办事项中移除，显示在已完成中

• 思路：通过done的状态切换完成,显示在已完成中和显示待办事项思路相同

changeTodo(index,done){
    if(done){
        this.todoLen--;
        this.todoList[index].done = true;
    }
    else{
        this.todoLen++;
        this.todoList[index].done = false;
    }
}

    
    
{{item.todo}}
    -

待办事项和已完成的计数功能

• 待办事项计数：data中的todoLen
• 已完成事项计数：待办事项长度 - todoLen

{{todoLen}}
{{todoList.length - todoLen}}

删除单条待办事项

• 需要判断移除事项done值，来对计数进行不同的操作
• 删除事项即使用数组方法splice从数组中移除

deleteTodo(index,done){
        if(done){
            this.todoLen--;
        }
        this.todoList.splice(index,1)
},

clear清除所有事项

• 直接清空数组和计数

clearData () {
    localStorage.clear()
    this.todoList = []
    this.todoLen = 0
}

保存在本地localStorage中

• 以上功能实现后，已可以实现基础功能，还存在的问题是，刷新后，数据会被清除，因此选择将数据存储在本地localstorage中

export function setItem(key,value){
    localStorage.setItem(key,JSON.stringify(value));
}
export function getItem(key){
    return JSON.parse(localStorage.getItem(key));
}
export function removeItem(key){
    localStorage.remove(key);
}

• 添加事项

addTodo(){
    let todoObj = {
        todo:this.todo,
        done:false,
    }
    var tempList = Utils.getItem('todoList')
if (tempList) {
tempList.push(todoObj)
Utils.setItem('todoList', tempList)
} else {
    var tempData = []
    tempData.push(todoObj)
    Utils.setItem('todoList', tempData)
}
    this.todoList.push(todoObj);
    this.todoLen++;
    this.todo = '';
}

• 修改事项状态

changeTodo(index,done){
    if(done){
        this.todoLen--;
        this.todoList[index].done = true;
        Utils.setItem('todoList', this.todoList)
    }
    else{
        this.todoLen++;
        this.todoList[index].done = false;
        Utils.setItem('todoList', this.todoList)
    }

}

• 删除单条事项

-
deleteTodo(index,done){
    if(done){
        this.todoLen--;
    }
    this.todoList.splice(index,1)
    Utils.setItem('todoList', this.todoList)
}

• 删除所有事项

clearData () {
    localStorage.clear()
    this.todoList = []
    this.todoLen = 0
}

• 刚载入页面时，需要检查本地存储,对待办事项进行初始化

initTodo () {
    var todoArr = Utils.getItem('todoList')
    if (todoArr) {
    for (let i = 0, len = todoArr.length; i < len; i++) {
        if (todoArr[i].done === false) {
        this.todoLen++
        }
        }
    this.todoList = todoArr
    }
}

整体效果

相关知识点梳理

vue表单输入绑定

• vue文档 https://cn.vuejs.org/v2/guide/forms.html

vue事件绑定

• vue文档 https://cn.vuejs.org/v2/guide/events.html

v-for 事件循环

• vue文档 https://cn.vuejs.org/v2/api/#v-for

localStorage

• 菜鸟教程 https://www.runoob.com/jsref/prop-win-localstorage.html

JSON.parse()和JSON.stringfy()

• https://www.jb51.net/article/51331.htm

CSS样式梳理

注意删除全局默认样式

• 在写样式的时候，发现页面存在默认样式，发现在创建脚手架时，存在一部分默认全局样式忘记删除。
  

单条item

• 单条item可以写成一个新组件完成
• 每条item标签li内包含input，p，a
• 其中li相对定位，input，a绝对定位实现定位

删除符号的实现

• 双线边框,两个边框的宽度和 border-width 的值相同

文字删除线

• text-decoration: line-through

已完成项目不透明度设置

• opacity: 0.5，不透明度为0时内容消失