Vue重点案例之一 Tabs案例

m2003969x
1,225 阅读5分钟

作为一个资深的前端小白，做案例对我来说是多么的头大，今天就也是头大的一天

image.png

那么我们娓娓道来，传说中的Tabs案例是什么东西呢？其实他就是 Vue案例罢了，长这个样子 image.png

那些说Vue很简单的，但是对于小白来说 漏，咱们漏。

image.png

首先我们需要搭建项目就是那几个组件（说组件显得高逼格一点）

⚡后缀名一定要vue（别担心M单纯只是还没有保存）

image.png

接着咱们在主组件里引入所需要的几个文件，并且使用

image.png

⚡注意注意注意 咱们一定要在 components里注册一下这些标签才能使用哦，千万不要把单词写错了

image.png

接下来咱们来做底部的切换 就是这鬼东西，用到的文件有：myTabsvue，myNavbar.vue

image.png

咱们定义一个数组对象，看自己心情定义，报错了的话那就说明不能看自己心情定义

image.png

接着咱们来定义一下子组件，所需要的东西，如下

image.png

咱们需要定义子组件的类型还有必传项

image.png

咱们的父组件还需要使用一下指令（有够麻烦的但是为了生活低头吧）

image.png

然后咱们需要接收所点击的值，毕竟咱们靠这玩意吃饭呢

image.png

接着咱们就是需要循环啦，咱们这里使用的是vue方法里的v-for，咱们再依次把内容填进去就好了 current是用来接收name值的，

image.png

关于底部 俺有话要讲🙋‍

咱们可以设定一个底部的导航数量，比如最少2个最多5个，为什么是这个数字呢，因为太多了不知道怎么写，代码可以这样写

image.png

那些图标咱们可以直接去阿里巴巴矢量库里找，找什么样的完全看自己喜欢，没有网址自己搜，瞧把你懒得

image.png

咱们还可以精化一下，让它默认选中第一个，代码可以这样写，别问为什么comName会有小点点，我也不知道

image.png

那咱么底部的动态绑定就搞定了

image.png

现在完成最复杂的数据渲染了

image.png

要用到的组件有：myGoods.vue和myTable.vue

在此之前，咱们需要干一件事情，就是axios的封装，咱们需要准备两个文件，命名看自己喜欢，建议正常一点答应我好吗，不知道怎么命名建议下载有道，也没有地址自己搜下对了就对了

那咱们要开始了

image.png

咱们先引入myTable.vue这个文件，还有自己封装的axios文件，接着定义标签，使用，不知道的话建议百度

image.png

这部分咱们需要用到插槽，用到具名插槽和作用域插槽

image.png

接着咱们使用，此处需要循环生成每个商品列表，咱们又用到老朋友v-for，在代码里表现得形式是酱紫

image.png

咱们严谨一点定义一下类型还有是否为必填项

image.png

前面咱们有说过具名插槽需要写在template标签里，所以接下来的内容，页面主题结构都写在这个标签里 （真羡慕标签里面都那么多内容我脑子里却没有）

这里就是id，商品名字，商品价格，没什么好新奇的，如果你看了一分钟你会发现你浪费了 秒 image.png

然后咱添加一个删除按钮，给他添加一点样式

image.png

🤦‍♂️重点来了家人们

这里给我的感觉就是数学题，分开都懂，合在一起就不知道什么鬼东西了

  • 咱们需要循环遍历生成tags标签，不然显示出来就是一个对象v-for，效果不好（如果不是生活谁愿意这么复杂呢）

image.png

  • 需要实现单击+tags按钮，同时隐藏当前按钮，咱们可以使用使用v-if来设置它的显示与隐藏

  • 一开始的输入框是默认隐藏为false的，所以咱们可以给input框设置点击事件@click，点击之后取反为true

  • 咱们使用自定义的全局指令让输入框自动聚焦，myfous是指令名字，想使用就必须是这个名字，其他没可能

image.png

添加啦家人们

  • 咱们需要先实现双向绑定这是必须的 v-model，并且添加按键回车事件，@keyup.enter=''

image.png

  • 接着写公式啦，将内容添加到数组 push，但是咱们可以判断一下里面有没有相同的内容，如果添加的内容重复了会红色，dddd，详细步骤如下

image.png

然后咱们就添加成功了，没成功的话当我没说

image.png

删除部分啦，快结束了

想到删除，肯定是要传id，都学到Vue了，咱肯定也要用高级一点的东西定义一个事件，所以第一步出来啦，先整个点击事件整起@click='事件名字'

image.png

接着咱们定义了肯定要使用嘛，所以就在methods方法里面使用啦，注意一定要传入id哦，不然会飘红，咱们可以用到filter方法过滤每一项，返回自己想要的项

image.png

大致就是这一些啦，如果有不对的地方，就是你对，只能想到这些了其他想到不到，有Bug再说

image.png

avatar
文章
阅读
粉丝