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. 调整win7 Windows7下时间同步的频率时 钟同步间隔

    今天发现时间不对,同步时间后看到Windows系统默认是一周才同步一次时间,频率太低了.查找了一下资料,找到了两种调整Win7时间同步频率的方法. 方法一:注册表法 这种方法是通过修改注册表中的键值来 ...

  2. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementById

    按照ID获取元素 -- getElementById 标准 DOM 1,定义在HTMLDocument Interface 中,原型Element getElementById(in DOMStrin ...

  3. js常见怪异

    1.隐式转换为布尔:"truthy"和"falsy" 当 JavaScript 需要一个布尔值时(例如:if 语句),任何值都可以被使用. 最终这些值将被转换为 ...

  4. JavaScript备忘录(3)——正则表达式

    正则表达式是用来进行字符串匹配的. 定义正则表达式有两种方法:/wor/或者new RegExp("wor"). 使用方法 在JS中,使用正则表达式的方法有: 字符串的search ...

  5. zepto - push

    var arr = ['1', '2', '3', '4']; arr.push('qwe'); console.log(arr);

  6. log4net日志功能使用

        早就想了解下log4net这个组件的使用,直至今日才有时间学习了一下,现在把学习的新的总结如下: (1).在项目中添加log4net.dll引用.说明:该版本是1.2.10.0 ,log4ne ...

  7. 代码演示用 KnockoutJS 和 Web API 对一个表格（Gird）进行 CRUD 操作，在 MVC 5 下

    实体类: using System; using System.Collections.Generic; public partial class EmployeeInfo { public int ...

  8. 如何查看distirbution agent的执行进度

    在transactional replication troubleshooting的过程中,经常会遇到下面的场景: 客户在发布端执行了一个几百万行的更新,结果导致性能下降. 客户很想知道目前dist ...

  9. ruby -- 问题解决（四）编码错误导致无法显示（2）

    从数据库中取得数据显示时报 incompatible character encodings: GBK and ASCII-8BIT或 incompatible character encodings ...

  10. HTML5探索一（那些新增的标签和属性）

    tml5相比html4,添加了部分语义化的标签和属性,现在我们就从这些标签和属性开始,学习html5吧. 首先,认识下HTML5新的文档类型: <!DOCTYPE html> 那些新标签 ...