小白初入前端之Vue.js的学习之路——vue学习第三弹

举报
小黑脸 发表于 2020/06/16 22:45:19 2020/06/16
【摘要】 继续之前的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一样,不然风格完全变了,希望...

       继续之前的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 ,和实际不符,只是用于测试动画效果。以后熟练了再回头看看,这样不好,但是先放弃吧。

image.pngimage.pngimage.pngimage.pngimage.png



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。