从零开始学习Vue(三)

我们从一个例子来学习组件，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名字的内容替换掉.

             <m-tabbar-item id='tab1'>

                <img src="../assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal">

                <img src="../assets/images/ic_tab_home_active.png" alt="" slot="icon-active">

                首页

              </m-tabbar-item>

子组件模板:

            <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="$parent.$emit('input',id)">

                <span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span>

                <span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span>

                <span class="m-tabbar-item-text"><slot></slot></span>

            </a>

最终生成的HTML:

<a class="m-tabbar-item">

<span class="m-tabbar-item-icon">

<img src="../assets/images/ic_tab_home_normal.png" alt=""></span>

<span class="m-tabbar-item-icon" style="display: none;">

<img src="../assets/images/ic_tab_home_active.png" alt=""></span>

<span class="m-tabbar-item-text">

首页

</span>

</a>

<img src="../assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal">  会替换掉 <slot name="icon-normal"></slot>

<img src="../assets/images/ic_tab_home_active.png" alt="" slot="icon-active"/> 会替换掉 <slot name="icon-active"></slot>,并把slot的名字去掉

首页  会替换掉  <slot></slot> 这个匿名的.

整个页面的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport" />

    <script src="Scripts/vue.js" type="text/javascript"></script>

    <style type="text/css">

        .m-tabbar

        {

            display: flex;

            flex-direction: row;

            position: fixed;

            bottom: 0;

            left: 0;

            right: 0;

            width: 100%;

            overflow: hidden;

            height: 50px;

            background: #fff;

            border-top: 1px solid #e4e4e4;

        }

        .m-tabbar-item

        {

            flex: 1;

            text-align: center;

        }

        .m-tabbar-item-icon

        {

            display: block;

            padding-top: 2px;

        }

        .m-tabbar-item-icon img

        {

            width: 28px;

            height: 28px;

        }

        .m-tabbar-item-text

        {

            display: block;

            font-size: 10px;

            color: #949494;

        }

        .is-active

        {

            color: #42bd56;

        }

    </style>

</head>

<body>

    <div id="app">

        <div>

            <m-tabbar v-model="select">

             <m-tabbar-item id='tab1'>

                <img src="../assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal">

                <img src="../assets/images/ic_tab_home_active.png" alt="" slot="icon-active">

                首页

              </m-tabbar-item>

              <m-tabbar-item id='tab2'>

                <img src="../assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal">

                <img src="../assets/images/ic_tab_subject_active.png" alt="" slot="icon-active">

                书影音

            </m-tabbar-item>

              <m-tabbar-item id='tab3'>

                <img src="../assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal">

                <img src="../assets/images/ic_tab_status_active.png" alt="" slot="icon-active">

                广播

              </m-tabbar-item>

              <m-tabbar-item id='tab4'>

                <img src="../assets/images/ic_tab_group_normal.png" alt="" slot="icon-normal">

                <img src="../assets/images/ic_tab_group_active.png" alt="" slot="icon-active">

                小组

              </m-tabbar-item>

               <m-tabbar-item id='tab5'>

                <img src="../assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal">

                <img src="../assets/images/ic_tab_profile_active.png" alt="" slot="icon-active">

                我的

              </m-tabbar-item>

          </m-tabbar>

        </div>

    </div>

    <script type="text/javascript">

        Vue.component("m-tabbar", {

            props: ['value'],

            template:'<div class="m-tabbar"><slot></slot></div>'

        });

        Vue.component("m-tabbar-item", {

            props: ['id'],

            computed: {

               isActive(){

                   if(this.$parent.value===this.id){

                       return true;

                   }

                   else

                        return false;

               }

            },

            template:'<a class="m-tabbar-item" :class="{\'is-active\':isActive}" @click="$parent.$emit(\'input\',id)">'

                +'<span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span>'

                +'<span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span>'

                + '<span class="m-tabbar-item-text"><slot></slot></span>'

                +'</a>'

        });

        var app = new Vue({

            el: '#app',

            data: {

                select:"tab1"

            }

        });

    </script>

</body>

</html>

m-tabbar组件的双向绑定 v-model="select" 说明m-tabbar暴露出的属性value是和data里的select字段关联的，页面默认选中的是第一个tab，它的Id是tab1.

m-tabbar-item组件里有一个判断 this.$parent.value===this.id，父组件的value等于子组件的Id，则该子组件为选中的。

@click="$parent.$emit(\'input\',id)" 这个方法， 请参考这里 https://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

<m-tabbar v-model="select">等价于 <m-tabbar v-bind:value="select" v-on:input="select=arguments[0]">

所以要让组件的 v-model 生效，它必须：

接受一个 value 属性

在有新的 value 时触发 input 事件

所以@click="$parent.$emit(\'input\',id)" 这个方法就是在子组件click的事件，触发父组件的input事件把子组件的Id传个父组件的value属性

问题来了：为什么父组件有个input事件呢？ 它只是个div而已，我可以把这个事件名字改成其他的吗？

改成下面的代码，把事件名改成abcdef，是可以通过的

<m-tabbar v-bind:value="selectId" v-on:abcdef="tabSelect">

    <script type="text/javascript">

        Vue.component("m-tabbar", {

            props: ['value'],

            template:'<div class="m-tabbar"><slot></slot></div>',

            mounted: function () {

                console.log("m-tabbar mounted");

            }

        });

        Vue.component("m-tabbar-item", {

            props: ['id'],

            mounted: function () {

                console.log("m-tabbar-item mounted");

            },

            computed: {

               isActive(){

                   if(this.$parent.value===this.id){

                       return true;

                   }

                   else

                        return false;

               }

            },

            template:'<a class="m-tabbar-item" :class="{\'is-active\':isActive}" @click="$parent.$emit(\'abcdef\',id)">'

                +'<span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span>'

                +'<span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span>'

                + '<span class="m-tabbar-item-text"><slot></slot></span>'

                +'</a>'

        });

        var app = new Vue({

            el: '#app',

            data: {

                selectId:"tab1"

            },

            methods:{

                tabSelect:function(Id){

                    console.log("tabSelect");

                    this.selectId= Id;

                }

            }

        });

    </script>

是任意名字都可以吗？不是的，我试过有2个是不行的。当事件名里有包含Select或者Index这2个词时，父组件就监听不到这个事件了。难道这2个是什么保留字，有人知道吗？

从零开始学习Vue(三)的更多相关文章

从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航从零开始学习jQuery (三) 管理jQuery包装集一.摘要在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点官网:http://cn ...
从零开始学习vue(2)
一.vue实例每个vue应用都是通过Vue构造函数创建的一个新的实例开始的: var vm = new Vue({ //选项对象 }) 在这其中vm(viewModel的简称)通常都表示vue实例的 ...
从零开始学习Vue(一)
因为最近有个项目的需求是,微信公众号+IOS/Android APP, 界面都很类似. 以往的做法是APP是调用JSON接口,后台只负责提供接口. 而H5,我以前都是用Jquery,用来写手机网站总是 ...
前端框架开始学习Vue(三)
初步安装.与搭建 https://www.cnblogs.com/yanxulan/p/8978732.html ----如何搭建一个vue项目安装 nodejs,,, npm i == np ...
oracle从零开始学习笔记三
高级查询随机返回5条记录 select * from (select ename,job from emp order by dbms_random.value())where rownum< ...
从零开始学习Vue(四)
这里引入一个概念SPA(single Page Application), 接着上次的例子,我们在页面底部做了一个Tab的菜单,点击不同的按钮应该是显示不同的内容. 按传统的MVC的思维,我要在Con ...
从零开始学习Vue(二)
思维方式的变化 WebForm时代, Aspx.cs 取得数据,绑定到前台的Repeater之类的控件.重新渲染整个HTML页面.就是整个页面不断的刷新;后来微软打了个补丁,推出了AJAX控件,比如U ...
从零开始学习jQuery(转)
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...

随机推荐

jquery图片放大镜和遮罩层效果
图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...
datatable 使用详细说明
要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理.以下是在进行dataTable绑定处理时候可以附加的参数: ...
Hadoop学习笔记-003-CentOS_6.5_64_设置ssh免密码登录
参考:http://blog.csdn.net/u010270403/article/details/51444677 虚拟机中共五个centos系统,每个系统有两个用户root和hadoop:cdh ...
ECMAScript 6 笔记（四）
Symbol 1. 概述 ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null.布尔值(Boolean) ...
说说 bash 的 if 语句
说说 bash 的 if 语句在开始先给大家列出几个术语,不做解释,不懂的可以参考其它资料. 术语和符号: 退出状态码 $? [...] (中括号,方括号) [[...]] (双中括号,双方括号) ...
LinkedList底层实现，及其数据结构实现。
LinkedList底层的实现基于双向表 prev data next next指向下一个node的地址.prev指向上一个node. 这里的代码是LinkedList类的源码. private st ...
Python单元测试——深入理解unittest
单元测试的重要性就不多说了,可恶的是python中有太多的单元测试框架和工具,什么unittest, testtools, subunit, coverage, testrepository, nos ...
matlab 嵌套循环的学习
循环嵌套带嵌套的循环一般为两重,举例1: disp('一个简单的二重for循环'); : : result = ii *jj ; fprintf(' %d * %d = %d \n',ii,jj,re ...
基于Selenium2+Java的UI自动化（6）-操作Alert、confirm、prompt弹出框
alert.confirm.prompt这样的js对话框在selenium1 时代处理起来比价麻烦,常常要用autoit来帮助处理.而现在webdriver对这些弹出框做了专门的处理,使用seleni ...
MongoDB学习总结(五) —— 安全认证
作为数据库软件,我们要确保数据的安全,不是谁都可以访问的,所以mongodb也像其他的数据库软件一样可以采用用户验证的方法, mongodb 3.0之前的版本提供了addUser方法向不同的数据库添加 ...

从零开始学习Vue(三)

从零开始学习Vue(三)的更多相关文章

随机推荐

热门专题