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混合的更多相关文章

  1. Vue混合mixins

    前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...

  2. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  3. Vue 混合

    混合(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混合对象可以可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混合到该组件本身的选项. //定义一个混合对象 va ...

  4. 11、VUE混合

    1.混合的概念(mixture) 混合是以一种灵活的方式,为组件提供代码复用功能.(类似于封装) 混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中 ...

  5. Cordova+vue 混合app开发（一）创建Cordova项目

    简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...

  6. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  7. 实现一个简单的vue-router

    所有项目的源代码都放在我的github上,欢迎大家start: https://github.com/Jasonwang911/my-vue-router 首先来看下vue-router的使用: im ...

  8. 使用nodejs进行开发，concurrently模块，使我们同时执行多个命令。

    concurrently模块使用. 安装模块 npm install concurrently 配置concurrently 运行多个服务 当我们使用nodejs和vue混合开发的时候.当要同时启动后 ...

  9. vue的混合mixins学习

    mixins   混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.   混合对象可以包含任意组件选项.   当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选 ...

随机推荐

  1. Microsoft 2013 新技术学习笔记 二

    在探讨系统重构的代码结构组织之前,先初步考虑框架与数据库的交互,在.net平台上数据访问方案有人总结为三类:DataSet.ADO.net 2.0.ORM组件.我只熟悉ADO.NET方式,众多的企业特 ...

  2. Socket模型详解(转)

    两种I/O模式 一.选择模型 二.异步选择 三.事件选择 四.重叠I/O模型 五.完成端口模型 五种I/O模型的比较 两种I/O模式 1. 两种I/O模式 阻塞模式:执行I/O操作完成前会一直进行等待 ...

  3. 十五、EnterpriseFrameWork框架核心类库之系统启动入口与初始化

    本章内容是讲三种开发模式,web模式.Winform模式和Wcf模式的系统启动入口有什么区别,以及启动后系统初始化的内容:为什么要把这些单独提出来讲一章,因为我觉得本章非常重要,我们都知道程序中的ma ...

  4. NoSql---MongoDB基本操作

    MongoDB 最大的特点是他支持的查询语言非常强大,其语法有点类似于面向对象的查询语 言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引.最后由于 MongoDB 可以支 ...

  5. Android View的加载过程

    大家都知道Android中加载view是从Activity的onCreate方法调用setContentView开始的,那么View的具体加载过程又是怎么的呢?这一节我们做一下分析. 首先追踪一下代码 ...

  6. python异常处理（基础）

    之前在学习python的时候有整理过python异常处理的文章,不够简单也不够完整,所以决定再整理一篇,算做补充. http://www.cnblogs.com/fnng/archive/2013/0 ...

  7. js-变量

    一.变量的类型  Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: ...

  8. .Net魔法堂：AssemblyInfo.cs文件详解

    一.前言 .net工程的Properties文件夹下自动生成一个名为AssemblyInfo.cs的文件,一般情况下我们很少直接改动该文件.但我们实际上通过另一个形式操作该文件.那就是通过在鼠标右键点 ...

  9. Android的init过程（二）：初始化语言（init.rc）解析

    Android的init过程(一) 本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 在上一篇文章中介绍了init的初始化第一阶段,也就是处理各种属性.在本文将会详细分析i ...

  10. 【第三课】ANR和OOM——贪快和贪多的后果（下）

    Out of Mana,法力耗尽. 内存就像法力,耗尽了就什么都不能做了.有时候一个应用程序占用了太大的内存,超过了Android系统为你规定的限制,那么系统就会干掉你,以保证其他app有足够的内存. ...