vue+webpack app项目(2)

step4 slot的使用


<slot> 就是外部调用时,标签中的内容。如果外部调用时没有提供内容的话,那么它就会使用自己默认提供的内容,非常方便。

-这个字面意思确实难以理解,用代码解释
-首先定义Bar.vue组件替代最外层的nav

Paste_Image.png

-然后在main.vue import 进来引用

-原来的nav标签就会变成这样写

Paste_Image.png

-先看现在的效果

Paste_Image.png

-一切正常,但是如果把Bar.vue中的slot注释,就没有这些导航图标了,所以我可以理解为使用了slot可以把不在Bar.vue的template中的代码引进来,不使用就直接使用Bar.vue的template模板了

Paste_Image.png

--现在可以把里面的item元素也弄成一个BarItem.vue组件
--这里要知道一个新的指令v-link和它的activeClass配合

v-link 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。http://router.vuejs.org/zh-cn/link.html 详情看这里

= = 先上代码BarItem.vue

Paste_Image.png

-script中的props是在main.vue传进来的参数,v-link中的replcace:true 是用了router.replace()而不是router.go()也就是不能后退(首页标签页切换就不让用户有后退的功能了),activeClass是当路由激活时加上的类

--main.vue现在的代码

Paste_Image.png

--对了,记得把BarItem.vue引进来喔
--现在的效果还是像之前一样,但是已经实现组件化了

step5 菜单栏配置路由

--新建search.vue、message.vue、me.vue、home.vue,然后在router.js中做相应的配置

Paste_Image.png

--这里动态组件载入就是常说的懒加载组件

当你在使用 Webpack 或者 Browserify 时,在基于异步组件编写的 Vue 项目时,也可以较为容易的实现惰性加载组件。不再是之前所述的直接引用一个组件,现在需要像下面这样通过定义一个函数返回一个组件:

--resolve这个参数有点难理解,实际就是用异步加载,用AMD风格的写法是

require(['./MyComponent.vue'], 
     function (MyComponent) { 
    // code here runs after MyComponent.vue is asynchronously loaded
.})

--五个路由都写好就可以随意切换tab了

step6 HomeTab编写

Paste_Image.png

-想要达到这种效果
-homeTab这部分也是可以提取出组件作为各个tab的头部
-赞一下vue的错误提示,一开始死活显示不了,这错误提示还是很明显的


Paste_Image.png

--用组件记得在js components中注册
--还有这个提示,注册了变量没


Paste_Image.png

已更新github代码,不求打赏只求github小星星,跪求
https://github.com/sally2015/vue-project

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容