08、手把手教Vue--来几个小Demo

PS：转载请注明出处
作者: TigerChain
地址https://www.jianshu.com/p/0b45ac7914b7
本文出自 TigerChain 手把手教 Vue 系列

教程简介

• 1、阅读对象
  本篇教程适合新手阅读，老手直接略过
• 2、教程难度
  初级，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢
• 3、Demo 地址:https://github.com/tigerchain/vue-lesson 请看 07、几个Vue小demo 这一节
• 4、演示地址

正文

掌握了前面几节的知识，我们上手 Vue 应该没有什么难度了，在公司中就可以做些东西了「边学边用么，等到你学会再用，黄花菜都凉了」

这一节，我们不介绍新的知识了，就做几个小小的 demo 来巩固一下前面所学的知识，这些小 demo 就是用来练手的「也当就是复习了」，废话不多说了，来看看今天的这些小 demo

1、悬浮吸顶效果

stick-top

2、商品多选效果

select-demo

3、标签选中和默认色值替换

tab-select

4、折叠效果

accordian

当然如果你喜欢可以在折叠条上添加一个向上和向下的三角按钮，自行发挥吧

5、简易计算器

calculator

一个非常简单的计算器「有些许 bug 没有处理，如果感觉兴趣可以自行解决」

6、下拉选择菜单

selectmenu

从图中我们可以看到，选择菜单有过渡效果，并且鼠标停留在那个选项中变成红色，离开恢复到默认颜色

本节就这么几个小小的 demo 大家来感受一下，全当是复习 vue 的知识

---

点赞富一生，转发富五代，更多文章请关注我的微信公号来查阅

公众号：TigerChain