学java要学vue吗_[Java教程]从零开始学习Vue(三)

[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名字的内容替换掉. 首页

子组件模板:

最终生成的HTML:首页

会替换掉 会替换掉 ,并把slot的名字去掉首页 会替换掉 这个匿名的.

整个页面的代码如下：

首页 书影音 广播 小组 我的

' }); Vue.component("m-tabbar-item", { props: ['id'], computed: { isActive(){ if(this.$parent.value===this.id){ return true; } else return false; } }, template:' ' +'' +'' + '' +'' }); var app = new Vue({ el: '#app', data: { select:"tab1" } });