Vue—TodoList案例（动画、计算属性、组件、组件通信、浏览器本地存储、监视属性）

冷不防 2024-04-07 16:06 125阅读 0赞

**目录**

分类

页面展示

main.js

App.vue

components

Item.vue

List.vue

MyFooter.vue

MyHeader.vue

--------------------

#### **分类**  ####

![cb9460e62b95441d9307a1193fb58077.png][]

####  **页面展示** ####

刚开始 我们的任务东辉从左边飘过来

![cbd739ba3a6d4b8d9c07e925d6f2d249.png][]

编辑功能

![010c98351db24798855d06707694c013.png][]

## main.js ##

// 该文件是整个项目的入口文件
    
    // 引入vue，这个vue不能解析template配置项
    import Vue from 'vue'
    // 下面这个是引入完整版的vue。这个vue能解析template配置项
    // import Vue from 'vue/dis/vue'
    
    // 引入APP组件，它是所有组件的父组件
    import App from './App.vue'
    
    
    
    // 关闭vue的生产提示
    Vue.config.productionTip = false
    
    // 创建vue实例对象---vm
    new Vue({
      el:'#app',
      render: h => h(App),
    
      beforeCreate(){
        Vue.prototype.$bus = this
      }
    })

##  ##

## App.vue ##

<template>
        <div id="root">
            <div class="todo-container">
                <div class="todo-wrap">
                    
                    
                    
                    
                    <MyHeader  @addTodo="addTodo"></MyHeader>
    
                    
                    
                    <List 
                        :todos="todos"     
                    ></List> 
    
                    
                    
                    <MyFooter 
                    
                     :todos="todos" 
                     @checkAllTodo="checkAllTodo"
                     @clearAllTodo="clearAllTodo"
                    ></MyFooter>  
                    
                </div>
            </div>
        </div>
    </template>
    
    <script>
    // 引入组件
       import pubsub from 'pubsub-js'
       import MyFooter from './components/MyFooter.vue'
       import MyHeader from './components/MyHeader.vue'
       import List from './components/List.vue'
       import Item from './components/Item.vue'
    
    
    
    
        export default {
            name:'App',
            // 注册组件
            components:{
                MyFooter,
                MyHeader,
                List,
                Item,
            },
            data(){
                return{
                    // done:true  这个地方不要加引号，否则会能跑，被误认为字符串
                    // todos:[
                    //     {id:'001',title:'抽烟',done:true},
                    //     {id:'003',title:'喝酒',done:false},
                    //     {id:'002',title:'开车',done:true},
                    // ]
    
                    // JSON.parse解析JSON语句
                    // 为什么会加   || []   ？
                    //    以防JSON.parse(localStorage.getItem('todos'))这个地方时null，我们后面会用todos.length 这样就出现了空指针异常
                    todos:JSON.parse(localStorage.getItem('todos')) || []
                }
            },
    
             methods:{
            // 添加一个todo
            addTodo(todoObj){
               this.todos.unshift(todoObj)
            },
            // 勾选or取消一个todo
            checkTodo(id){
                // 对上面的数据进行遍历
                this.todos.forEach( (todo)=>{
                 if(todo.id === id){
                    // 取反
                    todo.done = !todo.done
                 }
                })
            },
            // 删除一个todo
            deleteTodo(msgName,id){
                // 过滤器
              this.todos =  this.todos.filter((todo)=>{
                // 将符合条件的留下
                return todo.id !== id
              })
            },
            // 底部复选框，将所有的todo都按照底部复选框的形式，（底部选就都选
            checkAllTodo(done){
                this.todos.forEach((todo)=>{
                    todo.done = done
                })
            },
            // 清除所有已经完成的todo
            clearAllTodo(){
               this.todos =  this.todos.filter((todo)=>{
                    // 留下done为false的
                    return !todo.done
                })
            },
            // 更新一个todo
            updateTodo(id,title){
                this.todos.forEach((todo)=>{
                    if(todo.id === id)
                    todo.title = title
                })
            }
             },
    
            //  对于todos的监视我们要开启深度监视！！！！！一定要注意
            watch:{
                //其实这个地方有两个参数，一个是newValue，一个是oldValue，这个地方我们只需要newValue
                // 对于深度监视，不能写这种简写形式
                //  todos(value){
                //   
                // }
                todos:{
                    // 深度监视：todos里面的数据改变（包括复选框之类的），这个handler就会调用，而上面那种写法不会
                    deep:true,
                    handler(value){
                        localStorage.setItem('todos',JSON.stringify(value))
                    }
                }
            },
            mounted() {
                 this.$bus.$on('checkTodo',this.checkTodo)
                 this.$bus.$on('updateTodo',this.updateTodo)
                //  接收消息 当接收到deleteTodo时，执行deleteTodo函数回调
                this.pubId =  pubsub.subscribe('deleteTodo',this.deleteTodo)
            },
            beforeDestroy(){
                this.$bus.$off('checkTodo')
                this.$bus.$off('updateTodo')
                pubsub.unsubscribe(this.pubId)
    
            }
        
    }
    </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-edit {
            color: #fff;
            background-color: skyblue;
            border: 1px solid skyblue;
            margin-right: 5px;
        }
    
    
        .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>

##  ##

## components ##

### Item.vue ###

<template>
    
            <li>
            
            <label>
                
                <input type="checkbox"  :checked="todo.done" @change="handleCheck(todo.id)"/>
                
                <span v-show="!todo.isEdit">{
       {todo.title}}</span>
                
                <input type="text" v-show="todo.isEdit"  :value="todo.title" @blur="handleBlur(todo,$event)"
                        ref="inputTitle" />  
            </label>
            
    
            
            <button class="btn btn-danger"  @click="handleDelete(todo.id)" >删除</button>
    
            <button class="btn btn-edit"  v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
        </li>
    
       
    </template>
    
    <script>
          import pubsub from 'pubsub-js'
    export default {
       name:'Item',
    
       //接收List传过来的todo对象
       props:['todo'],
       methods:{
        handleCheck(id){
          this.$bus.$emit('checkTodo',id)
        },
        handleDelete(id){
        //   this.$bus.$emit('deleteTodo',id)
        pubsub.publish('deleteTodo',id)
        },
        handleEdit(todo){
            // todo.hasOwnProperty()判断身上有无什么属性
          if(todo.hasOwnProperty()){
           //有的话
           todo.isEdit= true
          }else{
            //  没有的话
            
        //   todo.isEdit= true不能这么写 这么添加的isEdit的话 一会更改isEdit的时候，页面不会更改
          this.$set(todo,'isEdit',true)  //这样写才被vue认可  上面那种做法不会有getter和setter
          }
        //   让我们编辑的那个输入框获取焦点
        //   this.$refs.inputTitle.focus()   这样做显然是不行的 存在一个顺序问题
        //   走完if语句之后,vue并没有解析模板,而是顺着往下执行this.$refs.inputTitle.focus()
        // 但是因为没有解析模板  this.$refs.inputTitle.focus()并不能使已经隐藏的编辑框得到焦点
        
        // $nextTick所指定的回调会在DOM结点更新完毕之后再执行
        this.$nextTick(function(){
            this.$refs.inputTitle.focus()
            })
        },
        //当失去焦点的时候，我们真正的实现编辑  
        handleBlur(todo,e){
     // 当失去焦点好，让todo.isEdit = false
         todo.isEdit = false
           if( !e.target.value.trim()){
            // 当输入的不存在时
             return alert('不能为空')
           }
     
            this.$bus.$emit('updateTodo',todo.id,e.target.value)
        }
       }
    }
    </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;
        }
    
        /* 可以使鼠标滑过前面紧贴元素目标1时,触发动态效果. */
        li:hover{
            background-color:#ddd ;
        }
    
        li:hover button{
            /* 成为“块级”元素 */
            display: block;
        }
    </style>

###  ###

### List.vue ###

<template>
        <div>
             <ul class="todo-main">
              
               
             
              <transition-group name="todo" appear>   
                <Item 
                   v-for="todoObj in todos" 
                   
                   :key="todoObj.id"  
                   :todo="todoObj"   
                ></Item>
              </transition-group>
          
             </ul>
        </div>
    </template>
    
    <script>
    
      import Item from './Item'
    
    
    export default {
       name:'List',
       components:{
        Item,
       },
       props:['todos']
        
       
    }
    </script>
    
    <style scoped>
        /* 当我们给transition一个属性name时，我们应该把v换成name */
        /* 进入时候的动画 */
        .todo-enter-active{
            animation: atguigu 1s;
        }
        /*出去时候的动画*/  
        .todo-leave-active{
            /* 执行atguigu动画1秒钟   reverse是反转的意思 */
            animation: atguigu 1s  reverse;
        } 
        
        /* 定义一个动画 */
        @keyframes atguigu{
           from{
            /* 从左边而来 */
            /* transform: translateX(-100px); */
            transform: translateX(-100%);
           }
           to{
            transform: translateX(0px);
           }
        }
    
    
        /*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>

###  ###

### MyFooter.vue ###

<template>
        
        <div class="todo-footer" v-show="total">
            <label>
                
               
               <input type="checkbox"  v-model="isAll"/>
            </label>
            <span>
               <span>已完成{
       {doneTotal}}</span> / 全部{
       {total}}
            </span>
            <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
        </div>
    
    </template>
    
    <script>
    
    
    export default {
        name:'MyFooter',
        // props:['todos','checkAllTodo','clearAllTodo'],
        props:['todos'],
        computed:{
            total(){
              return this.todos.length
            },
    
            // 下面是计算属性的简写形式（不用写成一个配置对象的形式）
            // 这个函数当成getter用，函数的名就是计算属性的名
            doneTotal(){
                // pre之前的值,current现在的值（在这个就是指的todo项
             return  this.todos.reduce((pre,current)=>{
            //  这里面是一个函数，数组的长度是几，这个函数就调用几次
                return pre+(current.done ?1 : 0)
              },0)
            },
    
            // 判断一下，是不是下面的复选框跟着变
            isAll:{
                get(){
                    return this.doneTotal===this.total && this.total>0
                },
                set(value){
                    // this.checkAllTodo(value)   改进
                    this.$emit('checkAllTodo',value)
                }
            }
    
        },
        methods:{
            // 全选或者全不选
            // checkAll(e){
            //     this.checkAllTodo(e.target.checked)
            // }
            clearAll(){
                // this.clearAllTodo()  改进
                this.$emit('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>

###  ###

### MyHeader.vue ###

<template>
        <div class="todo-header">
            <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add" />
        </div>
    </template>
    
    <script>
        // 使用id 的库
        import {nanoid} from 'nanoid'
    
        export default {
            name:'MyHeader',
            methods:{
                add(e){
                    if(!e.target.value.trim()){
                        // 如果是空的话，就执行下面的语句
                        alert("输入不能为空")
                        // 直接return
                        return
                    }
                    // 使用nanoid()创建id
                    const todoObj={id:nanoid(),title:e.target.value,done:false}        
                    // this.addTodo(todoObj) 改进方法后这个地方不能使用了
    
                    // 触发addTodo事件   传入参数todoObj
                    this.$emit('addTodo',todoObj)     
    
                    // 当用户输入完成回车后，让文本框没有字符
                    e.target.value='' 
                }
            
            },
            // props:['addTodo']   我们改进了方法，不用这个了
                
            
        }
    </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>

[cb9460e62b95441d9307a1193fb58077.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7381bcd431ca4c0da5f20094f8f63941.png
[cbd739ba3a6d4b8d9c07e925d6f2d249.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6baf209d6ef24620bc54be26cf8a4a1f.png
[010c98351db24798855d06707694c013.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e293323d0c4343ecba2145225cd9b471.png