• 混合minxins


    <!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: {} })
  • 相关阅读:
    TestPaste text
    WPF XML序列化保存数据 支持Datagrid 显示/编辑/添加/删除数据
    C# WPF xml序列化 反序列化
    C# show FTP Download/Upload progress
    BAT for 循环
    C# httpRequest Soap请求
    day6 os模块
    day6 random随机数模块
    day6 time和datetime模块
    day5 常用模块json和pickle
  • 原文地址:https://www.cnblogs.com/52-qq/p/8387097.html
Copyright © 2020-2023  润新知