vue+nodejs+mongdb萌新实战开发日志之vue问题

主要记录一些实战中遇到的坑，一些奇怪问题的解决方式，还有一些网上可能无法找到的问题解决方法（可能不是最优方法）有些命名方式可能会令你窒息，但是问题的解决方式还是很ok的
更新或许会不勤快，因为最近在疯狂赶进度，如果有问题可以评论，不过可能不能及时的回答问题，但一定会回答。

所有问题的解决一定要记住，不是搜索引擎搜索而是去看官方文档

1.<router-view>比较大白话的详细解释
2.transition动画在多个模块动画切换的时候不正常显示
3.特别思想，搜索框下边li做成的提示框如何移动到后进行变色而不是全变色
4.对外部应用组件的样式进行修改方法（如element-ui）**

1.<router-view>到底显示哪一个路由路径的组件？

当你想在当前页面点击是，不跳转页面，在当前页面显示另一个小组件时你就得用到routerview了（例如美团进入商家页面时候的评价，商品之间的切换）
先来看一下官方文档的介绍

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ，根据嵌套路径，渲染嵌套组件。
routeview首先匹配以及路由，在进入子路由时会判断子路由是否有routerview，如果没有将由上一个routerview直接渲染子路由组件
下面是实例讲解

代码如下

路由代码

接下来解释一下routeview倒地在相应页面解析什么组件了
最外层首先会匹配第一级路由的组件（加上/1/2是为了告诉萌新一定不要以为/1/2是/1的子路由，他是路由/1/2），接下来去判断加载的路由中是否有routeview，如果有，他就会使用子路由里面组件的routeview，简单的来说，一个routerview只能使用一次，属于一一对应的关系，最外的routerview对一级路由进行匹配，而下面的组件的routerview对相对于他的组件的子路由进行匹配，不会渲染上一级的组件匹配

2.transition动画在多个模块动画切换效果的时候不正常显示

情况有非常多种，最重要的是进入调试工具看，你对应的动画的元素，在你执行动画操作的时候（如显示隐藏）有没有瞬间出现
xxx-enter或许xxx-leave的class，如果出现了没动画，那就是动画设置错误。如果没出现那你可能遇到和我一样的问题了。
两个毫不相关的div，但是在显示隐藏切换时候动画并没有出现(他们在同一个transition之中）

代码如下

我要是实现的是切换的时候出现动画，但是却没有，百度谷歌了一下没找到相关的回答，这个问题可能出现的次数太少，
后面测试后发现enter和leave的class并没有出现，多番思考后，我想起vue会复用dom来提升效率，或许他把这两个毫不相干的div认为是同一个dom了，这是我给他们分别加上了key值进行区分

没错解决了，vue复用了dom所以这div根本没有显示或者消失，只是修改了内容而已，原因暂时不知道为什么，最近赶进度，等完成后一定会折返回来研究

3.特别思想，搜索框下边li做成的提示框如何移动到后进行单个变色而不是全部变色

我们一般是改变判断的值，而改变动态改变判断的条件也是一个很不错的方法，给li标签中的class绑定一个data值（判断条件），之后在循环时，给用index给class绑定不一样的判断的值。在鼠标移动上去时改变data值改为当前的index值即可

4.对外部应用组件的样式进行修改方法（如element-ui）

只推荐一种方法而不推荐全局样式修改，全局样式修改会影响全局！！！！！！！！全局样式修改会影响全局！！！！！！！！全局样式修改会影响全局！！！！！！！！特别不推荐！
用/deep/或>>>进行穿透设置

先给上class后，将class穿透到组件的class之中，查看组件class使用调试工具即可，例如

后者的el-input就是组件的class，将设置的class穿透进去即可