<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    </style>

</head>

<body>

<div id="app">

    <popup></popup>

    <tooltip></tooltip>

</div>

<script src="../lib/vue.js"></script>

<script src="js/main.js"></script>

</body>

</html>
#公共的东西写出来，下边直接调用，如果下边写了会被下边的覆盖掉
var base = {

    methods: {

        show: function () {

            this.visible = true

        },

        hide: function () {

            this.visible = false

        },

        toggle: function () {

            this.visible = !this.visible

        }

    },

    data: function () {

        return {

            visible: false

        }

    }

};

Vue.component("tooltip", {

    template: `

        <div>

        <span @mouseenter="show" @mouseleave="hide">tool</span>

        <div v-if="visible">张建平</div>

</div>

    `,

    minxins: [base],

    data:function () {     //覆盖minxins

        return{

            visible:true

        }

    }

});

Vue.component("popup", {

    template: `

        <div>

        <button @click="toggle">Popup</button>

        <div v-if="visible">

        <span @click="hide">x</span>

        <h4>title</h4>

        this is my test page!

        this is my test page!

        this is my test page!

        this is my test page!

        this is my test page!

        this is my test page!

        this is my test page!

        this is my test page!

</div>

</div>

    `,

    minxins: [base]

});

new Vue({

    el: "#app",

    data: {}

})

混合minxins的更多相关文章

  1. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

  2. Android混合开发之WebView与Javascript交互

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...

  3. ThinkPHP+Smarty模板中截取包含中英文混合的字符串乱码的解决方案

    好几天没写博客了,其实有好多需要总结的,因为最近一直在忙着做项目,但是困惑了几天的Smarty模板中截取包含中英文混合的字符串乱码的问题,终于解决了,所以记录下来,需要的朋友看一下: 出现乱码的原因: ...

  4. 如玫瑰一般的PHP与C#混合编程

    故事背景是这样的,有一套项目,服务器端是用C#写的,为了完成某种事情,它需要使用到一个组件,这个组件很小但很重要,很不巧的是,这个这个组件是用PHP语言写的,如果为了使用这个组件而专门搭建一个PHP的 ...

  5. Android混合开发之WebView使用总结

    前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...

  6. egret3D与2D混合开发，画布尺寸不一致的问题

    egret3d的GUI目前还没有,在做3d游戏的时候没有UI可用,只能使用egret2d的EUI组件库,egret3d与egret2d混合开发,canvas3d的大小与位置与canvas2d并没有重合 ...

  7. Unity iOS混合开发界面切换思路

    Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...

  8. OpenStack 企业私有云的若干需求（4）：混合云支持 (Hybrid Cloud Support)

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  9. [LeetCode] Merge Sorted Array 混合插入有序数组

    Given two sorted integer arrays A and B, merge B into A as one sorted array. Note:You may assume tha ...

随机推荐

  1. [转]Mac屏幕录像转成gif

    http://note.axiaoxin.com/contents/mac-video2gif.html 屏幕录像 打开Quicktime Player -> 文件 -> 新建屏幕录像 - ...

  2. kali-set

    Set 简介 开源的社会工程学利用套件,通常结合metasploit(部分)来使用 更改 /etc/setoolkit下的配置文件 set_config BLEEDING_EDGE="Fal ...

  3. x86保护模式 任务状态段和控制门

    x86保护模式    任务状态段和控制门 每个任务都有一个任务状态段TSS     用于保存任务的有关信息     在任务内权变和任务切换时  需要用到这些信息    任务内权变的转移和任务切换  一 ...

  4. HDU-1392 Surround the Trees,凸包入门！

    Surround the Trees 此题讨论区里大喊有坑,原谅我没有仔细读题还跳过了坑点. 题意:平面上有n棵树,选一些树用绳子围成一个包围圈,使得所有的树都在这个圈内. 思路:简单凸包入门题,凸包 ...

  5. 也来“玩”Metro UI之磁贴（一）

    Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩,动手……然后就有了本篇. Win8 ...

  6. python 向MySQL里插入中文数据

    用python向MySQL中插入中文数据出错,原代码片段: 1 db = MySQLdb.connect("localhost","root","12 ...

  7. 【Luogu】P2953牛的数字游戏（博弈论）

    题目链接 自己乱搞……然后一遍AC啦! 思路从基本的必胜态和必败态开始分析.我们把减去最大数得到的数叫作Max,减去最小数得到的数叫作Min. 那么开始分析. 一.0是必败态. 这个没法解释.题目就这 ...

  8. FZU 2020 :组合 【lucas】

    Problem Description 给出组合数C(n,m), 表示从n个元素中选出m个元素的方案数.例如C(5,2) = 10, C(4,2) = 6.可是当n,m比较大的时候,C(n,m)很大! ...

  9. 常州模拟赛d2t3 小X的佛光

    平日里最喜欢做的事就是蒸发学水.[题目描述]小 X 所在的城市 X 城是一个含有 N 个节点的无向图,同时,由于 X 国是一个发展中国家,为了节约城市建设的经费,X 国首相在建造 X 城时只建造 N ...

  10. 安卓解析XML文件

    安卓解析XML文件 主要有三种方式:DOM解析.SAX解析.PULL解析 其中: DOM解析为等XMl文件全部加载后,然后根据需要解析的内容解析出所需的内容数据. SAX解析为从XML文件中执行一行, ...