小白初入前端之Vue.js的学习之路——vue学习第三弹
继续之前的vue学习,vue的基础:v-text,v-html,v-for,v-model,v-if,v-show,v-on,v-bind,另外还有动画transition,我认为的基础,因为到后面确实有难度了,vue.component(大概这么拼吧)组件的时候还好,基础代码。但是到vue-cli彻底懵逼,感觉还要学习node.js和webpack一样,不然风格完全变了,希望不要从此踏上从入门到放弃的道路上。
之前的两篇博客其实已经将v-text,v-html,v-for(前两篇忘记说了),v-model,v-on,v-bind应用了。那么今天就将v-if和v-show
结合transition说一下。v-if和v-show都是根据条件来确定是否(v-show是显示,v-if是渲染)具体看官网,说实话,这博文写的和没写一样,因为具体内容好像不多,都是官网上的简简简简简简简简略版,反而像是进度汇报,最后贴代码!!!=。=。而transition是再元素的显示和消失时的动画效果。
对于完全不会css的人来说,vue提供了很好的方法可以配合使用第三方 CSS 动画库,如 Animate.css(官网的例子就不贴了,直接贴我的代码吧)。等华为前端到全栈学习了再看会不会写动画了,感觉讲的基础,不一定会讲到,拭目以待吧。
闲话少说,贴代码吧(吐槽一下这个博客系统:贴代码不能像markdown一样显示代码风格,和文本一样,所以只得贴照片了),从照片来看,其实代码变化并不大,只是显示待办事项的<li>标签不用v-for实现了,使用了固定的4个,因为我也不会用v-for结合v-show来使用,所以本demo只允许出现4个todoevent + doneevevt ,和实际不符,只是用于测试动画效果。以后熟练了再回头看看,这样不好,但是先放弃吧。
- 点赞
- 收藏
- 关注作者
评论(0)