<!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. luogu3980 [NOI2008]志愿者招募

    神题,还不太清楚 #include <iostream> #include <cstring> #include <cstdio> #include <que ...

  2. windows liver writer下载地址

    wlsetup-all.exe 链接:http://pan.baidu.com/s/1bo9pm7X 密码:zchb wlsetup-all简体版.exe 链接:http://pan.baidu.co ...

  3. NYOJ 293 Sticks

    Sticks 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 George took sticks of the same length and cut them r ...

  4. BZOJ 4719 [Noip2016]天天爱跑步 ——树链剖分

    一直以为自己当时是TLE了,但是再看发现居然WA? 然后把数组扩大一倍,就A掉了.QaQ 没什么好说的.一段路径分成两段考虑,上升的一段深度+时间是定值,下降的一段深度-时间是定值,然后打标记统计即可 ...

  5. BZOJ 1297: [SCOI2009]迷路 [矩阵快速幂]

    Description windy在有向图中迷路了. 该有向图有 N 个节点,windy从节点 0 出发,他必须恰好在 T 时刻到达节点 N-1. 现在给出该有向图,你能告诉windy总共有多少种不同 ...

  6. leetcode 94 中序遍历模板

    /**递归的写法 * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * Tre ...

  7. 如何快速下载maven依赖jar包

    找到settings.xml文件.在mirrors里面添加下面的代码: <mirror> <id>alimaven</id> <mirrorOf>cen ...

  8. 【BZOJ1305】dance跳舞（最大流，裂点，二分答案）

    题意:一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲. 有一些男孩女孩相互喜欢,而其他相互不喜欢(不会“单向喜欢”). ...

  9. Peaks BZOJ 3545 / Peaks加强版 BZOJ 3551

    Peaks [问题描述] 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询问 ...

  10. gridview和detailsview的完美结合运用实现增删改

    原文发布时间为:2008-07-24 -- 来源于本人的百度文章 [由搬家工具导入] 1、因Gridview中没有增加记录，所以应利用datalistview或formview来弥补。 2、因为det ...