Vue学习（十七）nextTick和过度与动画

nextTick

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次DOM更新接收后执行其指定的回调。
3. 使用时机：当数据改变后，基于更新后的新DOM进行某些操作时，在nextTick诊所指定的回调函数中执行

handleEdit(todo) {
   
	// todo.isEdit = true;
	if (todo.hasOwnProperty("isEdit")) {
   
		todo.isEdit = true;
	} else {
   
		this.$set(todo, "isEdit", "true");
	}
	/* setTimeout(()=>{
		this.$refs.inputTitle.focus();
	}, 200); */
	// 
	this.$nextTick(function() {
   
		this.$refs.inputTitle.focus();
	});
},

过度与动画

写法

样式准备：

• 进入样式：

1. v-enter: 进入的起点
2. v-enter-active: 进入过程中
3. v-enter-to: 进入的终点

• 离开的样式：

1. v-leave: 离开的起点
2. v-leave-active: 离开过程中
3. v-leave-to: 离开的终点

使用

使用<transition></transition>包裹要过度的元素，并配置name属性

<transition name="hello">
    <h1 v-show="isShow">内容</h1>
</transition>

注意：若多个元素需要过度，则需要使用<transition-group></transition-group>进行包裹，且每个子元素都要指定key值

App组件

<template>
    <div>
		<Test/>
		<Test2/>
		<Test3/>
	</div>
</template>

<script>

    import Test from './components/Test'
    import Test2 from './components/Test2'
    import Test3 from './components/Test3'

    export default {
   
        name: "App",
        // 注册组件
        components: {
   Test, Test2,Test3},
    }
</script>

Test组件

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- <transition>
        <h1 v-show="isShow" >你好啊！</h1>
    </transition> -->
    <!-- <transition name="myTransition" :appear="true"> -->
    <transition name="myTransition" appear>
        <h1 v-show="isShow" >你好啊！</h1>
    </tra