个人认为学习一个新的框架最好的方式是先看文档和去实战小项目,然后进一步的去了解它背后的实现原理,最后通过阅读源码来学习各种代码组织方式和里面的优越架构思维。这里在简书上开一个vue的学习笔记专栏,希望可以记录自己学习的同时也可以为互联网上其他小伙伴在学习Vue的路上提供一点参考,嘿嘿
1、单元素/组件过渡
Vue在丰富单页面的样式 transition,为我们提供了的封装组件,这里废话不多说,我们直接看一个典型的例子(也是官网的例子)
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}