Vue的过渡动画和动态组件

今天我学习了Vue的过渡动画和动态组件。Vue的过渡动画可以让页面元素在添加、删除或更新时产生动画效果，例如淡入淡出、滑动等：

<transition name="fade">

  <p v-if="show">This is shown if show is true.</p>

</transition>

 

.fade-enter-active, .fade-leave-active {

  transition: opacity .5s;

}

 

.fade-enter, .fade-leave-to {

  opacity: 0;

}

 

Vue的动态组件可以让我们根据不同的状态加载不同的组件，例如根据用户登录状态显示登录组件或主页面组件：

<component :is="currentComponent"></component>

 

var app = new Vue({

  el: '#app',

  data: {

    userLoggedIn: false,

    currentComponent: ''

  },

  created: function() {

    this.currentComponent = this.userLoggedIn ? 'main-component' : 'login-component'

  }

})

 

明天我将继续学习Vue的插件和自定义指令。