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. 许可EDM营销是个长期过程

    为什么这么说呢?基于博主自己这三四年的理解,许可EDM营销确实是个长期的过程,这跟一般的EDM营销有一定的区别. 大多数时候不会有立竿见影的效果,而且需要持续地不间断地进行到底,这也是很多企业实施许可 ...

  2. 分享一个Mongodb PHP封装类

    <?php /** * Mongodb 基本操作API,支持基本类似关系统型数据库的操作接口 * * @version 1.0 * [说明] * * 1:该版本API实现了 Mongodb 中最 ...

  3. 开发BI系统时的需求分析研究

    我们知道MIS,知道ERP,知道GIS等等,这些系统在管理限制上有很多的冲突,管理和被管理,开放和限制等等,然而BI在开始就不是这样的.BI要求的就是易用还要易于扩展,首先是报表,这个是你无条件的需要 ...

  4. 如何克隆kvm虚拟机

    关于如何使用kvm虚拟化技术创建虚拟机,这里有一系列博客讲的已经非常清楚了,这里不再赘述,不过其中有些小坑可能需要大家注意: 0. 写在创建虚拟机之前(即教程的系列三之前) 1. 确认防火墙是否关闭, ...

  5. Transactional replication 的Snapshot 文件在什么情况下会被清除

    Snapshot agent负责收集publication database的信息,将article的内容存储在snapshot文件中.而distribuiton cleanup job(后文简称清除 ...

  6. 2014 网选 5012 Dice(bfs模板)

    /* 题意:就是给定两个筛子,每个筛子上6个面,每个面的数字属于[1,6], 且互不相同! 问a筛子最少经过按照题目规定的要求转动,达到和b筛子上下左右前后的数字相同! 思路:很直白的bfs,将每一种 ...

  7. DateTimePicker 控件的格式设置

    DateTimePicker 控件的格式设置 CustomFormat属性设置 : yyyy-MM-dd HH:mm:ss  月大写M,分钟小写m,小时H代表24小时计算,h代表12小时计算yyyy- ...

  8. 使用的 SQL Server 版本不支持数据类型“datetime2”的错误解决方法

    THE VERSION OF SQL IN USE DOES NOT SUPPORT DATATYPE ‘DATETIME2′ 主要错误原因,在使用ado.net entity的时候,entity使用 ...

  9. Entity Framework增删改之通用精简方法

    用EF用了好长一段时间了,从EF4.0的版本开始接触,感觉这个ORM不能说性能是最好的,但是我个人感觉功能实现以及和mvc的结合还是一个不错的企业级网站的解决方案,在此写个简易的通用扩展方法来方便大家 ...

  10. Apache+tomcat+mod_jk+centos6.2负载均衡集群配置--转载

    转载地址:http://blog.163.com/chenhui_java/blog/static/17267249420128101191860/ 注: 由于长期受转载毒害,所以本人日志均是原创:其 ...