Vue nextTick

一、$nextTick

        1.语法：this.$nextTick(回调函数)

        2.作用：在下一次DOM更新结束后执行其指定的回调。

        3.什么时候用：当改变数据后要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

.......................

this.$nextTick(function(){

        this.$refs.todoEdit.focus()

})

.......................

 二、TodoList_编辑

        在之前所写的TodoList案例中已经有了增添和删除，在这里添加编辑功能。添加一个编辑按钮和一个input框，作为编辑功能的DOM。

/*    todoItem组件    */
<template>
...............<input v-show="item.isEdit" type="text" :value="item.text" @blur="doneEdit(item)" @keydown.enter="loseFocus" ref="todoEdit"><button class="todo-item-edit" @click="todoEdit(item)" v-show="!item.isEdit">修改</button>
...............
</template><script>.............methods:{    .............todoEdit(todo){if(todo.hasOwnProperty('isEdit')){todo.isEdit = true}else{this.$set(todo,'isEdit',true)}this.$nextTick(function(){this.$refs.todoEdit.focus()})},doneEdit(todo){todo.isEdit = falsethis.$bus.$emit('todoEdit',todo.id,this.$refs.todoEdit.value)},loseFocus(){this.$refs.todoEdit.blur()}.............}.............
</script>

/*    App组件    */    
<script>methods:{..............todoEdit(id,value){this.todoList.forEach(item=>{if(item.id === id) item.text =value})},..............},mounted(){this.$bus.$on('todoEdit',this.todoEdit)},beforeDestroy(){..............this.$bus.$off('todoEdit')..............}
</script>