DevOps海洋的渔夫

在前面的路由篇章中，我在写router-view的时候并没有什么特征标识，也就是所有路由映射的组件都可以显示出来。但是在一些经典后台布局中，一般什么组件在哪里显示是需要固定好的，如下： 好了，下面来写一个小例子。 在创建了这三个区域的组件之后，下面就是考虑如何在首页一个路由/下…

可能这一句话不能够直接说明情况，下面来直接看例子。 可以从上面看到，我在写regster和login的路由路径是/account/register和/account/login，其实跟/account路由没有太大的关系。 只是简单写了个前缀而已。 可以看到，父组件app下只能直…

上一章节讲解了vue-router的基本使用，本章节来开始看看如何在路由中设置参数。 那么继续使用上一篇的例子，给设置router-link的路径设置参数。 都可以看到参数的id已经被探测到了。 那么如果需要打印出id的数据，只要这样写就可以了this.$route.query…

在使用vue-router之前，首先要认识一下前端路由和后端路由的区别概念。 想要知道如何安装使用vue-router，那么肯定要知道哪里查看官方文档。 根据文档，安装vue-router有以下三种方式。 Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一…

在普通的js操作中，一般都是直接操作dom元素，但是对于Vue.js框架来说，一般是不允许直接操作dom元素的。 那么其实Vue.js框架提供了ref获取dom元素，以及组件引用。 从上面这里示例看出，ref虽然跟js都达到了获取dom元素的目的，好像没有什么出彩的地方，就好像…

为了更好看看父子组件之间的传值，本章来一个评论列表的小案例。 同时，需要写一个存储以及刷新评论信息列表的方法，在子组件提交评论信息之后，子组件还要调用父组件的这个刷新方法。 好了，看到上面几项的需求描述，下面来实现看看。 好了，现在基本页面已经写好了。但是为了演示父组件与子组件…

这就需要父组件传递事件方法，提供子组件调用，通过子组件调用父组件的函数，传入相关参数，来进行逆向传递。 而子组件如果想要调用父组件的函数，则需要使用emit方法。 父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传…

前面写了组件的创建、切换等等篇章，主要讲述了组件自身如何在父组件app中如何渲染使用。这里存在一个问题，就是父组件的数据如何传递到子组件中。 这是一个很常见的情况，如果是jQuery那么都是直接传参数就是了，而在Vue框架中，这里就要使用子组件中props属性来处理了。 那么下…

上一篇使用component元素实现组件切换，但是没有切换的动画效果。那么可以参考官网的例子，实现一下组件切换的动画，以及mode效果设置。 多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反，我们只需要使用动态组件： 从上面官网的例子中，写这个组件切…