<!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. Exchange 正版化 授权

    网友说法: Exchange服务器版其实价格不高,企业版也就是几万左右,贵的是客户端授权,一个客户端授权大概要300多.但是,但是,中国企业买Exchange客户端一般都是可以按比例买的,比如10%- ...

  2. IOS 自动布局-UIStackPanel和UIGridPanel(三)

    在这一篇了我将继续讲解UIGridPanel. 在iphone的app里面可以经常看到一些九宫格布局的应用,做过html开发的对这类布局应该是很熟悉的.在IOS中要实现这样的布局方法还是蛮多的,但是我 ...

  3. 大数据学习——scala入门程序

    安装scala.msi https://blog.csdn.net/sinat_32867867/article/details/80305302 notepad++ object HelloScal ...

  4. Terracotta服务器的不同配置方式

    Terracotta服务器的不同配置方式 博客分类: 企业应用面临的问题 Java&Socket 开源组件的应用 Terracotta双机多机镜像服务器阵列分片模式企业应用 Terracott ...

  5. Title共通写法

    用: <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_c ...

  6. 【bzoj1109】[POI2007]堆积木Klo 动态规划+树状数组

    题目描述 Mary在她的生日礼物中有一些积木.那些积木都是相同大小的立方体.每个积木上面都有一个数.Mary用他的所有积木垒了一个高塔.妈妈告诉Mary游戏的目的是建一个塔,使得最多的积木在正确的位置 ...

  7. [luoguP3159] [CQOI2012]交换棋子（最小费用最大流）

    传送门 好难的网络流啊,建图真的超难. 如果不告诉我是网络流的话,我估计就会写dfs了. 使用费用流解决本题,设点 $p[i][j]$ 的参与交换的次数上限为 $v[i][j]$ ,以下为建图方式: ...

  8. [BZOJ3054] Rainbow的信号（考虑位运算 + DP？）

    传送门 BZOJ没数据范围... 其实数据范围是这样的.. 前20%可以直接n^3暴力枚举每个区间 前40%可以考虑每一位,因为所有数每一位都是独立的,而和的期望=期望的和,那么可以枚举每一位,再枚举 ...

  9. [BZOJ1592] [Usaco2008 Feb]Making the Grade 路面修整（DP）

    传送门 有个结论,每一个位置修改高度后的数,一定是原来在这个数列中出现过的数 因为最终结果要么不递增要么不递减, 不递增的话, 如果x1 >= x2那么不用动,如果x1 < x2,把x1变 ...

  10. BZOJ 1026: [SCOI2009]windy数 【数位dp】

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? In ...