Vue混合
gitHub地址: https://github.com/manlili/vue_learn里面lesson13
一 定位
混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中。
实际上,我也没搞懂这句话,先研究再说,放个一年也许就自己慢慢懂了,时间这玩意可以发酵
二 定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue混合--定义</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script type="text/javascript">
var myMinxin= { //第一步,创建一个混合数据
created: function () {
this.hello();
},
methods: {
hello: function () {
alert('你好');
}
}
} var myComponent = Vue.extend({ //将混合注册到Vue
mixins: [myMinxin]
}) new myComponent(); //实例化这个混合
</script>
</body>
</html>
上面代码,弹出:
三 混合与Vue同名冲突
混合对象与组件包含同名选项时,这些选项将以适当的策略合并。例如,同名钩子函数被并入一个数组,因而都会被调用。另外,混合的钩子将在组件自己的钩子之前调用。
同名钩子函数冲突,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue混合--同名冲突</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script type="text/javascript">
var myMinxin= { //第一步,创建一个混合数据
created: function () {
this.hello();
},
methods: {
hello: function () {
alert('你好');
}
}
} var myComponent = Vue.extend({ //注意Vue的created与minxin的created重合,这里将先执行minxin的created
created: function () {
alert('我是Vue的created');
},
mixins: [myMinxin]
}) new myComponent(); //实例化这个混合
</script>
</body>
</html>
先弹出:
再弹出:
值为对象同名冲突,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue混合--同名冲突</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script type="text/javascript">
var myMinxin= { //第一步,创建一个混合数据
created: function () {
this.hello();
this.nono();
},
methods: {
hello: function () {
alert('你好1');
},
nono: function () {
alert('nono1');
}
}
} var myComponent = Vue.extend({ //methods中对象冲突,只显示Vue实例中的方法
created: function () {
this.hello();
this.nono();
},
mixins: [myMinxin],
methods: {
hello: function () {
alert('你好2');
},
nono: function () {
alert('nono2');
}
}
}) new myComponent(); //实例化这个混合
</script>
</body>
</html>
输出如下:
Vue混合的更多相关文章
- Vue混合mixins
前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- Vue 混合
混合(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混合对象可以可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混合到该组件本身的选项. //定义一个混合对象 va ...
- 11、VUE混合
1.混合的概念(mixture) 混合是以一种灵活的方式,为组件提供代码复用功能.(类似于封装) 混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中 ...
- Cordova+vue 混合app开发(一)创建Cordova项目
简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- 实现一个简单的vue-router
所有项目的源代码都放在我的github上,欢迎大家start: https://github.com/Jasonwang911/my-vue-router 首先来看下vue-router的使用: im ...
- 使用nodejs进行开发,concurrently模块,使我们同时执行多个命令。
concurrently模块使用. 安装模块 npm install concurrently 配置concurrently 运行多个服务 当我们使用nodejs和vue混合开发的时候.当要同时启动后 ...
- vue的混合mixins学习
mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式. 混合对象可以包含任意组件选项. 当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选 ...
随机推荐
- What's New in iOS9 iOS9功能改进
What's New in iOS9 This article summarizes the key developer-related features introduced in iOS 9, w ...
- ASP - MSXML2.ServerXMLHTTP & HTTPS & 证书过期 — msxml3.dll '80072f05'
Error: msxml3.dll '80072f05' The date in the certificate is invalid or has expired Dim xmlhttp Set ...
- 求拓扑排序的数量,例题 topcoder srm 654 div2 500
周赛时遇到的一道比较有意思的题目: Problem Statement There are N rooms in Maki's new house. The rooms are number ...
- 快乐的JS正则表达式(三)
?的用途. 小任务:匹配一段网址如var str = "http://www.123.com/";注意http也可以是https var str = "http://i. ...
- Android 学习笔记之Volley开源框架解析(一)
PS:看完了LGD的六场比赛...让人心酸... 学习内容: 1.Http请求的过程... 2.Volley的简单介绍... 1.Http请求... 这里只是简单的说一下Http请求的过程.. ...
- 更加优雅地搭建SSH框架(使用java配置)
时代在不断进步,大量基于xml的配置所带来的弊端也显而易见,在XML配置和直接注解式配置之外还有一种有趣的选择方式-JavaConfig,它是在Spring 3.0开始从一个独立的项目并入到Sprin ...
- CMD魔法堂:支持显示UTF8编码的中文
一.前言 在Unbuntu中用sqlite3-command-line操作sqlite3还好好的,到了windows下查询表内容时发现中文全部乱码了!马上想到sqlite3内部使用utf-8对字符进行 ...
- mysql 随机字符的产生方法
需求:需要插入随机数据,长度为6位,包含数字和大写字母. 一般来说我们会写类似如下的存储过程片断: ) default 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLM ...
- Mysql创建用户的三种基本方法
1.采用create user e.g. create user 'username'@'host' identified by 'password'; 2.采用grant语句 e.g. gran ...
- 餐厅到店点餐系统(APP)
MY-HR 成员: 角色分配 学号 博客园 丘惠敏 PM项目经理 201406114203 http://www.cnblogs.com/qiuhuimin/ 郭明茵 用户 201406114204 ...