从零开始学习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 ( ...
随机推荐
- MariaDB10自动化安装部署
去MariaDB官网下载MariaDB本文用的是MariaDB 10.1.16 https://downloads.mariadb.org 选择二进制版本,下载到/root目录下 mariadb-10 ...
- MonthCalendar控件
MonthCalendar控件 功能,直接显示月历,
- #DP# ----- OpenJudge最大子矩阵
OpenJudge 1768:最大子矩阵 总时间限制: 1000ms 内存限制: 65536kB 描述 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 ...
- pureMVC简单示例及其原理讲解一(开篇)
pureMVC是一个MVC框架,皆在最大限度的减少MVC间的耦合性.本人刚刚接触pureMVC时感到一头雾水,不知从何入手,也不知道从何学习.好在本人有耐性且能看懂英文技术文档,面向对象的编程能力也比 ...
- 迈向新纪元编辑器Atom
第一次听说Atom是半年前天猫的学姐说她在用这款这款编辑器,期间我从dw到st再到webstorm都分别做了项目~,但是作为一名拥抱开源的FE,怎么能拒绝github社区维护的项目呢?接着就让我们感受 ...
- SQL2008实现数据库自动定时备份——维护计划
在SQL Server中出于数据安全的考虑,所以需要定期的备份数据库.而备份数据库一般又是在凌晨时间基本没有数据库操作的时候进行,所以我们不可能要求管理员 每天守到晚上1点去备份数据库.要实现数据库的 ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务（上）
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(上)),不对的地方欢迎指出与交流. 章节出自<Professional C ...
- 剖析Asp.Net路由系统
对于Asp.Net Web Forms应用来说,请求的Url都是对应一个具体的物理文件(http://xxx.com/default.aspx).这样的Url与具体物理文件紧密绑定在一起,带来了诸多方 ...
- 使用devstack搭建openstack Newton 版本的坑
国外源访问速度慢怎么办? 使用国外源,加之带宽紧张,搭建过程是很累的,这里推荐大家使用一下源: devstack包源.:http://git.trystack.cn pip源: [global] in ...