在这里插入图片描述
@[toc]
在这里插入图片描述

改动的地方

<font color='red'>注意点1:</font>改动App和MyItem页面

<font color='red'>注意点2:</font>

问题:为啥按钮的css样式要放在App.vue中而不是放在MyItem.vue中?

<font color='red'>答案:</font>为了统一样式,把所有样式都放在App.vue中,这样子组件引用后按钮样式会全局统一。

<font color='red'>注意点3:</font>动态给todo添加属性isEdit属性,下面写法是错误的,因为isEdit 属性确实可以写入todo中,但是它不是响应式的,换句话说就是todo中有属性isEdit ,但是页面不会进行响应式\<span>标签和\<input>标签的切换更改,因为如图,isEdit 属性缺少get和set方法,从而导致缺少响应式更新。

错误写法:
Methods:{
     handleEdit(todo) {
        todo.isEdit = true;
    }
}

在这里插入图片描述

正确写法:使用<font color='red'>Vue.$set(target, property/index, value)</font>,向响应式对象中添加一个property属性
Methods:{
     handleEdit(todo) {
        this.$set(todo,'isEdit',true)
    }
}

<font color='red'>注意点4:</font>注意点3的写法不完美,因为todo第一次没有isEdit属性,你可以<font color='red'>Vue.$set</font>追加属性,等第二次再点击“编辑”按钮,实际todo已经有isEdit属性了,你继续追加属性就不优雅了,最好方案是加个条件,判断当前todo身上有没有isEdit属性,有就修改属性值,没有就<font color='red'>Vue.$set</font>追加属性。

//编辑
    handleEdit(todo){
        if(todo.hasOwnProperty('isEdit')){
            todo.isEdit = true
        }else{
            this.$set(todo,'isEdit',true)
        }
}

<font color='red'>注意点5:</font>

问题:想实现input输入框失去焦点就修改todo的title属性值,如何获取输入框的值?使用todo.title肯定是不行的,这个是旧值

<font color='red'>答案:</font>方法形参添加$event,通过e.target.value就可以获取input输入框的最新值

@blur="handleBlur(todo,$event)"

//失去焦点回调(真正执行修改逻辑)
handleBlur(todo,e){
    todo.isEdit = false
    if(!e.target.value.trim()) return alert('输入不能为空!')
    this.$bus.$emit('updateTodo',todo.id,e.target.value)
}

<font color='red'>注意点6:</font>存在一个细节问题如图,不优雅,就是在点击“编辑”按钮后确实显示输入框了,但是鼠标没聚焦,如果这时候输入框不去聚焦而是继续点击其它行的“编辑”按钮后,就会出现多行的输入框,明显不优雅。
在这里插入图片描述
<font color='red'>方案:</font>采用定时器加载或者使用官方提供的$nextTick函数
在这里插入图片描述

<font color='red'>官方提供了this.$nextTick函数(回调函数),用于$nextTick所指定的回调在DOM节点更新完毕之后才会执行。</font>

案例全部代码

main.js

main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})

App.vue

App.vue
<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <MyHeader @addTodo="addTodo"/>
                <MyList :todos="todos"/>
                <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    import MyHeader from './components/MyHeader'
    import MyList from './components/MyList'
    import MyFooter from './components/MyFooter'

    export default {
        name:'App',
        components:{MyHeader,MyList,MyFooter},
        data() {
            return {
                //由于todos是MyHeader组件和MyFooter组件都在使用,所以放在App中(状态提升)
                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
            updateTodo(id,title){
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.title = title
                })
            },
            //删除一个todo
            deleteTodo(_,id){
                this.todos = this.todos.filter( todo => todo.id !== id )
            },
            //全选or取消全选
            checkAllTodo(done){
                this.todos.forEach((todo)=>{
                    todo.done = done
                })
            },
            //清除所有已经完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter((todo)=>{
                    return !todo.done
                })
            }
        },
        watch: {
            todos:{
                deep:true,
                handler(value){
                    localStorage.setItem('todos',JSON.stringify(value))
                }
            }
        },
        mounted() {
            this.$bus.$on('checkTodo',this.checkTodo)
            this.$bus.$on('updateTodo',this.updateTodo)
            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 rgb(103, 159, 180);
        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>

MyHeader.vue

MyHeader.vue
<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称,按回车键确认" v-model="title" @keyup.enter="add"/>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'MyHeader',
        data() {
            return {
                //收集用户输入的title
                title:''
            }
        },
        methods: {
            add(){
                //校验数据
                if(!this.title.trim()) return alert('输入不能为空')
                //将用户的输入包装成一个todo对象
                const todoObj = {id:nanoid(),title:this.title,done:false}
                //通知App组件去添加一个todo对象
                this.$emit('addTodo',todoObj,1,2,3)
                //清空输入
                this.title = ''
            }
        },
    }
</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>

MyList.vue

MyList.vue
<template>
    <ul class="todo-main">
        <MyItem 
            v-for="todoObj in todos"
            :key="todoObj.id" 
            :todo="todoObj" 
        />
    </ul>
</template>

<script>
    import MyItem from './MyItem'

    export default {
        name:'MyList',
        components:{MyItem},
        //声明接收App传递过来的数据
        props:['todos']
    }
</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>

MyItem.vue

MyItem.vue
<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
            <!-- 如下代码也能实现功能,但是不太推荐,因为有点违反原则,因为修改了props -->
            <!-- <input type="checkbox" v-model="todo.done"/> -->
            <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 v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
    </li>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'MyItem',
        //声明接收todo
        props:['todo'],
        methods: {
            //勾选or取消勾选
            handleCheck(id){
                //通知App组件将对应的todo对象的done值取反
                // this.checkTodo(id)
                this.$bus.$emit('checkTodo',id)
            },
            //删除
            handleDelete(id){
                if(confirm('确定删除吗?')){
                    //通知App组件将对应的todo对象删除
                    // this.deleteTodo(id)
                    // this.$bus.$emit('deleteTodo',id)
                    pubsub.publish('deleteTodo',id)
                }
            },
            //编辑
            handleEdit(todo){
                if(todo.hasOwnProperty('isEdit')){
                    todo.isEdit = true
                }else{
                    // console.log('@')
                    this.$set(todo,'isEdit',true)
                }
                this.$nextTick(function(){
                    this.$refs.inputTitle.focus()
                })
            },
            //失去焦点回调(真正执行修改逻辑)
            handleBlur(todo,e){
                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;
    }

    li:hover{
        background-color: #ddd;
    }
    
    li:hover button{
        display: block;
    }
</style>

MyFooter.vue

MyFooter.vue
<template>
    <div class="todo-footer" v-show="total">
        <label>
            <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
            <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'],
        computed: {
            //总数
            total(){
                return this.todos.length
            },
            //已完成数
            doneTotal(){
                //此处使用reduce方法做条件统计
                /* const x = this.todos.reduce((pre,current)=>{
                    console.log('@',pre,current)
                    return pre + (current.done ? 1 : 0)
                },0) */
                //简写
                return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
            },
            //控制全选框
            isAll:{
                //全选框是否勾选
                get(){
                    return this.doneTotal === this.total && this.total > 0
                },
                //isAll被修改时set被调用
                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>

本人其他相关文章链接

1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》:使用vue脚手架创建项目

5.vue2知识点:数据代理

6.vue2知识点:事件处理

7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)

8.vue2知识点:计算属性与监听属性

9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)

10.vue2知识点:非单文件组件和单文件组件

11.vue2知识点:组件is属性

12.vue2知识点:组件模板定义

13.vue2知识点:组件的props属性、非props属性、props属性校验

14.vue2知识点:组件自定义事件

15.vue2知识点:组件插槽分发

16.vue2知识点:动态组件

17.vue2知识点:混入

18.vue2知识点:浏览器本地缓存

19.vue2知识点:全局事件总线(GlobalEventBus)

20.vue2知识点:消息订阅与发布

21.vue2知识点:nextTick语法

22.vue2知识点:Vue封装的过度与动画

23.vue2知识点:路由

24.vue2知识点:vm调用待$命令介绍

25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)

26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习:待办事项Todo-list案例练习

28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结


刘大猫
6 声望1 粉丝

如果有天突然发现路的尽头还是路的话,希望你还没错过太多沿路的风景和眼前珍惜的人。