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. 那些年做过的 .NET Web 项目和 iOS 之路的一些思考

    从2010年3月份出来工作到2015年初,做过的大大小小的 .NET Web 项目如下: (1)售楼系统产品    「Role: Team Member」 (2)中弘合同管理系统    「Role: ...

  2. 打开jnlp Faild to validate certificate, the application will not be executed.

    今天连jenkins, 本来好好的,只是我在一台机器上一直不断的启动不同的jnlp,绑定不同命名的slave, 然后突然就报错了, 如下截图所示:

  3. python 字符串替换

    字符串替换可以用内置的方法和正则表达式完成.1用字符串本身的replace方法: a = 'hello word'b = a.replace('word','python')print b 2用正则表 ...

  4. CSDN 2013年度博客之星评选——分享几张厦门杭州的美图

    亲爱的小伙伴们,作者在6号至20号,一直在休假中,出去也没带电脑,今天回家意外的发现自己有幸成为“CSDN 2013年度博客之星评选”的候选人,在此也谢谢各位小伙伴们的支持,谢谢CSDN的鼓励.我的投 ...

  5. android xml 常用控件介绍

    android常用控件介绍 ------文本框(TextView)     ------列表(ListView)     ------提示(Toast)     ------编辑框(EditText) ...

  6. STL中vector小结

    ()使用vector之前必须包含头文件<vector>:#include<vector> ()namespace std{ template <class T, clas ...

  7. 后端码农谈前端（CSS篇）第二课：CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  8. Linux文件查找工具之find “大宝剑”--转载

    原文地址:http://xinzong.blog.51cto.com/10018904/1749465 一.文件查找工具常用软件 locate: locate命令其实是find -name的另一种写法 ...

  9. 十分钟搞懂什么是CGI

    原文:CGI Made Really Easy,在翻译的过程中,我增加了一些我在学习过程中找到的更合适的资料,和自己的一些理解.不能算是严格的翻译文章,应该算是我的看这篇文章的过程的随笔吧. CGI真 ...

  10. HTTP状态码大全（转自wiki）

    1xx消息 这一类型的状态码,代表请求已被接受,需要继续处理.这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束.由于HTTP/1.0协议中没有定义任何1xx状态码,所以除非在某些试 ...