最近在学习vue，实现todolist案例，实现效果如下：

该案例分为四个部分：header为输入框，body为列表，item是列表中的条目，footer为最下方的统计。

实现步骤：

①创建项目

vue create 'vue_test'

②创建静态样式，创建vue组件，App统领全局，其他子组件在components中，UserHeader、UserList、UserItem、UserFooter

App：

<template>

  <div id="root">

    <div class="todo-container">

      <div class="todo-wrap">

      <!--将函数传给header-->

        <user-header></user-header>

<!--        将数据给list-->

        <user-list/>

        <user-footer />

      </div>

    </div>

  </div>

</template>

<script>

import userFooter from "@/components/UserFooter";

import userList from "@/components/UserList";

import userHeader from "@/components/UserHeader";

export default {

  name: "App",

  components: {

    userFooter,

    userHeader,

    userList

  },

  //将数据给list

  data(){

    return{

      todos:[

        {id:'001',title:'吃饭',done:true},

        {id:'002',title:'喝酒',done:true},

        {id:'003',title:'开车',done:false}

      ]

    }

  }</script>

<style>

/*base*/

body {

  background: #fff;

}

.btn {

  display: inline-block;

  padding: 4px 12px;

  margin-bottom: 0;

  font-size: 14px;

  line-height: 20px;

  text-align: center;

  vertical-align: middle;

  cursor: pointer;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

  border-radius: 4px;

}

.btn-danger {

  color: #fff;

  background-color: #da4f49;

  border: 1px solid #bd362f;

}

.btn-danger:hover {

  color: #fff;

  background-color: #bd362f;

}

.btn:focus {

  outline: none;

}

.todo-container {

  width: 600px;

  margin: 0 auto;

}

.todo-container .todo-wrap {

  padding: 10px;

  border: 1px solid #ddd;

  border-radius: 5px;

}

</style>

Header:

<template>

  <div class="todo-header">

    <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>

  </div>

</template>

<script>

export default {

  name: "userHeader",

}

</script>

<style scoped>

/*header*/

.todo-header input {

  width: 560px;

  height: 28px;

  font-size: 14px;

  border: 1px solid #ccc;

  border-radius: 4px;

  padding: 4px 7px;

}

.todo-header input:focus {

  outline: none;

  border-color: rgba(82, 168, 236, 0.8);

  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);

}

</style>

list

<template>

  <ul class="todo-main">

<!--    将数据给item-->

    <user-item/>

  </ul>

</template>

<script>

import userItem from "@/components/UserItem";

export default {

  name: "userList",

  components:{userItem}

}

</script>

<style scoped>

/*main*/

.todo-main {

  margin-left: 0px;

  border: 1px solid #ddd;

  border-radius: 2px;

  padding: 0px;

}

.todo-empty {

  height: 40px;

  line-height: 40px;

  border: 1px solid #ddd;

  border-radius: 2px;

  padding-left: 5px;

  margin-top: 10px;

}

</style>

Item:

<template>

  <li>

    <label>

      <input type="checkbox"/>

      <span>xxxx</span>

    </label>

    <button class="btn btn-danger">删除</button>

  </li>

</template>

<script>

export default {

  name: "userItem",

}

</script>

<style scoped>

/*item*/

li {

  list-style: none;

  height: 36px;

  line-height: 36px;

  padding: 0 5px;

  border-bottom: 1px solid #ddd;

}

li label {

  float: left;

  cursor: pointer;

}

li label li input {

  vertical-align: middle;

  margin-right: 6px;

  position: relative;

  top: -1px;

}

li button {

  float: right;

  display: none;

  margin-top: 3px;

}

li:before {

  content: initial;

}

li:last-child {

  border-bottom: none;

}

li:hover{

  background-color: #42b983;

}

li:hover button{

  display: block;

}

</style>

Footer

<template>

  <div class="todo-footer">

    <label>

      <input type="checkbox"/>

    </label>

    <span>

          <span>已完成0</span> / 全部4

        </span>

    <button class="btn btn-danger">清除已完成任务</button>

  </div>

</template>

<script>

export default {

  name: "userFooter"

}

</script>

<style scoped>

/*footer*/

.todo-footer {

  height: 40px;

  line-height: 40px;

  padding-left: 6px;

  margin-top: 5px;

}

.todo-footer label {

  display: inline-block;

  margin-right: 20px;

  cursor: pointer;

}

.todo-footer label input {

  position: relative;

  top: -1px;

  vertical-align: middle;

  margin-right: 5px;

}

.todo-footer button {

  float: right;

  margin-top: 5px;

}

</style>

③进行数据交互

将App的数组传递给List显示

<!--App中-->

<user-list :todos="todos">

<!--List中-->
export default {
  name: "userList",
  components:{userItem},
  props:['todos']//接收数据
}
<!--传递数据-->
<user-item v-for="todo in todos" :obj="todo" :key="todo.id">

<!--在Item接收数据-->
props:['obj']
<label>
      <input type="checkbox"/>
      <span>{{obj.title}}</span>
</label>

④实现header的添加功能

<!--添加键盘事件-->

<div class="todo-header">

    <input type="text" @keyup.enter="add" placeholder="请输入你的任务名称，按回车键确认"/>

</div>

<!--实现方法-->
import {nanoid} from 'nanoid' //生成id，通过npm i nanoid引入,保证id的唯一性
methods:{
  add(e){
    //校验数据
    if(!e.target.value){
      alert("输入不能为空")
      return
    }
  //  将用户的输入包装成一个todo对象
    const todoObj={id:nanoid(),title:e.target.value,done:false}
    //通知app组件添加对象
    this.addTodo(todoObj)
    e.target.value=''
  }
}
<!--在App中实现addTodo-->
addTodo(obj){
  this.todos.unshift(obj)
}

④实现勾选功能

//  取消或勾选选择，在App中实现，同时将方法暴露出去，List作为中转站

    checkTodo(id){

      this.todos.forEach((todo)=>{

        if(todo.id === id){

          todo.done = !todo.done

        }

      })

    }
//在Item中进行数据交互
<input type="checkbox" :checked="obj.done" @change="handleChange(obj.id)"/>
//在item中获取对象id，传到App中的checkTodo
handleChange(id){
  this.checkTodo(id)
}

⑤实现删除功能

//通过过滤器实现

//  删除todo

    delTodo(id){

      this.todos = this.todos.filter((todo)=>{

        return todo.id !== id

      })

    }
//List作为中转，Item中操作，通过id删除
delObj(id){
  if(confirm('确定删除吗?')){
    this.delTodo(id)
  }
}
 

⑥实现底部已完成和未完成比例



<label>
  <input type="checkbox" :checked="isChecked" @click="checkAll"/>
</label>



<!--通过计算属性得出，已完成为done值为true，全部为对象个数-->
<span>

          <span>已完成{{doneTotal}}</span> / 全部{{total}}

</span>


computed:{
  doneTotal(){
    /*let count = 0
    this.todos.forEach((todo)=>{
      if(todo.done) count++
    })
    return count*/
    //调用次数为函数长度
    return this.todos.reduce((pre,todo)=>{
      return pre + (todo.done ? 1 : 0)
    },0)
  },
  total(){
    return this.todos.length
  },
//判断是否选中，防止所有条目删除后出现bug


isChecked(){
  return this.doneTotal === this.total && this.total > 0
}


}




⑦全选或取消全选，Footer






<user-footer :todos="todos"
             :checkAllTodo="checkAllTodo"
              :clearAllTodo="clearAllTodo"/>



//  全选或取消全选，在App中实现，传递到Footer

    checkAllTodo(done){

      this.todos.forEach((todo)=>{

        todo.done=done

      })

    },
//在Footer中实现


checkAll(e){
  this.checkAllTodo(e.target.checked)
},




⑧清除已完成任务




//  清除已经完成的todo

    clearAllTodo() {

      this.todos = this.todos.filter((todo)=>{

        return !todo.done

      })

    }


clearChecked(){
  this.clearAllTodo()
}




以下是完整代码：






<template>

  <div id="root">

    <div class="todo-container">

      <div class="todo-wrap">

      <!--将函数传给header-->

        <user-header :addTodo="addTodo"></user-header>

<!--        将数据给list-->

        <user-list

            :todos="todos"

            :checkTodo="checkTodo"

            :delTodo="delTodo"

        />

        <user-footer :todos="todos"

                     :checkAllTodo="checkAllTodo"

                      :clearAllTodo="clearAllTodo"/>

      </div>

    </div>

  </div>

</template>

<script>

import userFooter from "@/components/UserFooter";

import userList from "@/components/UserList";

import userHeader from "@/components/UserHeader";

export default {

  name: "App",

  components: {

    userFooter,

    userHeader,

    userList

  },

  //将数据给list

  data(){

    return{

      todos:[

        {id:'001',title:'吃饭',done:true},

        {id:'002',title:'喝酒',done:true},

        {id:'003',title:'开车',done:false}

      ]

    }

  },

  methods:{

    //添加todo

    addTodo(obj){

      this.todos.unshift(obj)

    },

  //  取消或勾选选择

    checkTodo(id){

      this.todos.forEach((todo)=>{

        if(todo.id === id){

          todo.done = !todo.done

        }

      })

    },

  //  删除todo

    delTodo(id){

      this.todos = this.todos.filter((todo)=>{

        return todo.id !== id

      })

    },

  //  全选或取消全选

    checkAllTodo(done){

      this.todos.forEach((todo)=>{

        todo.done=done

      })

    },

  //  清除已经完成的todo

    clearAllTodo() {

      this.todos = this.todos.filter((todo)=>{

        return !todo.done

      })

    }

  }

}

</script>

<style>

/*base*/

body {

  background: #fff;

}

.btn {

  display: inline-block;

  padding: 4px 12px;

  margin-bottom: 0;

  font-size: 14px;

  line-height: 20px;

  text-align: center;

  vertical-align: middle;

  cursor: pointer;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

  border-radius: 4px;

}

.btn-danger {

  color: #fff;

  background-color: #da4f49;

  border: 1px solid #bd362f;

}

.btn-danger:hover {

  color: #fff;

  background-color: #bd362f;

}

.btn:focus {

  outline: none;

}

.todo-container {

  width: 600px;

  margin: 0 auto;

}

.todo-container .todo-wrap {

  padding: 10px;

  border: 1px solid #ddd;

  border-radius: 5px;

}

</style>




App






<template>

  <ul class="todo-main">

<!--    将数据给item-->

    <user-item

        :checkTodo="checkTodo"

        :delTodo="delTodo"

        v-for="todo in todos"

        :key="todo.id"

        :obj="todo" />

  </ul>

</template>

<script>

import userItem from "@/components/UserItem";

export default {

  name: "userList",

  components:{userItem},

  props:['todos','checkTodo','delTodo']

}

</script>

<style scoped>

/*main*/

.todo-main {

  margin-left: 0px;

  border: 1px solid #ddd;

  border-radius: 2px;

  padding: 0px;

}

.todo-empty {

  height: 40px;

  line-height: 40px;

  border: 1px solid #ddd;

  border-radius: 2px;

  padding-left: 5px;

  margin-top: 10px;

}

</style>




UserList






<template>

  <li>

    <label>

      <input type="checkbox" :checked="obj.done" @change="handleChange(obj.id)"/>

<!--      <input type="checkbox" v-model="obj.done"/> 使用双向数据绑定v-model修改props中的值,不建议使用-->

      <span>{{obj.title}}</span>

    </label>

    <button class="btn btn-danger" @click="delObj(obj.id)">删除</button>

  </li>

</template>

<script>

export default {

  name: "userItem",

  props:['obj','checkTodo','delTodo'],

  methods:{

    handleChange(id){

      this.checkTodo(id)

    },

    delObj(id){

      if(confirm('确定删除吗?')){

        this.delTodo(id)

      }

    }

  }

}

</script>

<style scoped>

/*item*/

li {

  list-style: none;

  height: 36px;

  line-height: 36px;

  padding: 0 5px;

  border-bottom: 1px solid #ddd;

}

li label {

  float: left;

  cursor: pointer;

}

li label li input {

  vertical-align: middle;

  margin-right: 6px;

  position: relative;

  top: -1px;

}

li button {

  float: right;

  display: none;

  margin-top: 3px;

}

li:before {

  content: initial;

}

li:last-child {

  border-bottom: none;

}

li:hover{

  background-color: #42b983;

}

li:hover button{

  display: block;

}

</style>




UserItem






<template>

  <div class="todo-footer" v-show="total">

    <label>

      <input type="checkbox" :checked="isChecked" @click="checkAll"/>

    </label>

    <span>

          <span>已完成{{doneTotal}}</span> / 全部{{total}}

        </span>

    <button class="btn btn-danger" @click="clearChecked">清除已完成任务</button>

  </div>

</template>

<script>

export default {

  name: "userFooter",

  props:['todos','checkAllTodo','clearAllTodo'],

  computed:{

    doneTotal(){

      /*let count = 0

      this.todos.forEach((todo)=>{

        if(todo.done) count++

      })

      return count*/

      //调用次数为函数长度

      return this.todos.reduce((pre,todo)=>{

        return pre + (todo.done ? 1 : 0)

      },0)

    },

    total(){

      return this.todos.length

    },

    isChecked(){

      return this.doneTotal === this.total && this.total > 0

    }

  },

  methods:{

    checkAll(e){

      this.checkAllTodo(e.target.checked)

    },

    clearChecked(){

      this.clearAllTodo()

    }

  }

}

</script>

<style scoped>

/*footer*/

.todo-footer {

  height: 40px;

  line-height: 40px;

  padding-left: 6px;

  margin-top: 5px;

}

.todo-footer label {

  display: inline-block;

  margin-right: 20px;

  cursor: pointer;

}

.todo-footer label input {

  position: relative;

  top: -1px;

  vertical-align: middle;

  margin-right: 5px;

}

.todo-footer button {

  float: right;

  margin-top: 5px;

}

</style>




UserFooter
												


																

最新文章
	

    
						
  1. Last-Modified、If-Modified-Since 实现缓存和 OutputCache 的区别
		
    2. 
						
  2. SVN版本问题：svn: E155021: This client is too old to work with the working copy at
		
    3. 
						
  3. overloading
		
    4. 
						
  4. C#取得当前目录 转载
		
    5. 
						
  5. html、css、js的命名规范
		
    6. 
						
  6. MySQL 多实例启动和关闭脚本
		
    7. 
						
  7. poj 3352 Road Construction【边双连通求最少加多少条边使图双连通&amp;&amp;缩点】
		
    8. 
						
  8. H5滚动轮播插件
		
    9. 
						
  9. Python简单爬虫Requests
		
    10. 
						
  10. 4.20 Linux01
		
    11. 
						
  11. Egret飞行模拟-开发记录01
		
    12. 
						
  12. （转）JavaWeb学习之Servlet（三）----Servlet的映射匹配问题、线程安全问题
		
    13. 
						
  13. 06LaTeX学习系列之---TeXstudio的使用
		
    14. 
						
  14. yizhihongqiang
		
    15. 
						
  15. POJ3692 Kindergarten
		
    16. 
						
  16. 跟我一起学习ASP.NET 4.5 MVC4.0（二）
		
    17. 
						
  17. ADT图及图的实现及图的应用
		
    18. 
						
  18. Linux USB驱动学习总结（一）---- USB基本概念及驱动架构
		
    19. 
						
  19. java 面向对象 — 封装
		
    20. 
						
  20. Linux 下的同步机制
		
    21. 
		

	


热门文章
	

    
									
  1. Ansible 多机自动化工具 初学笔记
			
    2. 
						
  2. slate源码解析（一）- 序言
			
    3. 
						
  3. RETRO研究: 持续缓解的RA患者的减量维持方案[EULAR2015_SAT0056]
			
    4. 
						
  4. axios的简易二次封装
			
    5. 
						
  5. Xilinx XPM使用说明--XPM_MEMORY_SDPRAM
			
    6. 
						
  6. Kotlin学习-基础知识点
			
    7. 
						
  7. Vue进度条组件
			
    8. 
						
  8. javaSE学习二
			
    9. 
						
  9. VMware 关于mininet
			
    10. 
						
  10. c++练习272题：金币
			
    11.