[Java教程]从零开始学习Vue(三)
0 2017-03-12 00:00:36
我们从一个例子来学习组件,vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
这个例子用到其他组件,对于初学者来说,一下子要了解那么多组件的使用,会变得一头雾水。所以我把这个例子改写了一下,只需要依赖Vue.
然后最好FQ安装一个chrome的扩展 vue-devtools,这样可以更好看到组件的内容
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。
SLOT的理解: 子组件有名字的slot,将会给父组件同名的slot替换掉, 子组件匿名的slot, 将会给父组件的其他没slot名字的内容替换掉. 首页
会替换掉 会替换掉 ,并把slot的名字去掉首页 会替换掉 这个匿名的.
整个页面的代码如下:
首页
书影音
广播
小组
我的