<!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. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

  2. Python基础之yield,匿名函数，包与re模块

    一.表达式形式的yield 1.另外一种形式的yield def deco(func): def wrapper(*arges, **kwargs): res = func(*arges, **kwa ...

  3. WordPress登录框显示/隐藏输入的密码

    直接让用户自行根据需要选择是全部隐藏输入的密码,还是全部显示输入的密码. 在全部显示密码框的内容时,用户输错的可能性就大大降低,这也是微软推荐的一种密码框处理方式.效果如下: 今天,我将给大家介绍,在 ...

  4. zoj 2830 Champion of the Swordsmanship

    Champion of the Swordsmanship Time Limit: 2 Seconds      Memory Limit: 65536 KB In Zhejiang Universi ...

  5. log日志，crontab

    定期备份mysql的log日志文件,保留一个月 将文件压缩为gzip格式,节省空间,备份到/home/shell/myqsl_back/目录下,保留一个月mysql_backup备份的脚本 #!/bi ...

  6. vue 自定义日历组件

    <template> <div class=""> <div class="calendarTraffic" name=" ...

  7. 常州模拟赛d2t2 小X的密室

    题目描述 密室中有 N 个房间,初始时,小 X 在 1 号房间,而出口在 N 号房间. 密室的每一个房间中可能有着一些钥匙和一些传送门,一个传送门会 单向地 创造一条从房间 X 到房间 Y 的通道.另 ...

  8. charts 画折线图

    主题:指定日期内,不同地区的发布信息的数量的变化曲线 数据库是mongod 数据是58同城的发布的信息 整体思路: 1由于从数据库中拿到的数据,格式等方面并不一样能完全满足需求,需要对数据库中的数据进 ...

  9. 实验三 kali下metasploit的漏洞攻击实践

    一.实验内容 1.使用kali进行靶机的漏洞扫描,利用metasploit选择其中的一个漏洞进行攻击,并获取权限. 2.分析攻击的原理以及获取了什么样的权限. 二.实验要求 1.熟悉kali原理和使用 ...

  10. poj 2891 模线性方程组求解

    Strange Way to Express Integers Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 8005   ...