Vue入門（十一）---- mixins

阿新 • • 發佈：2019-01-01

混入 (mixins)

是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。

main.js

var base = {
    methods: {
        show: function() {
            this.visible = true
        },
        hide: function() {
            this.visible = false
        },
        hide: function() {
            this 
.visible = false;  
        },
        toggle: function(){
            this.visible = !this.visible
        },
    },
    data() {
        return {
            visible: false,
        }
    },
}

Vue.component('tooltip', {
    template: `
    <div>
        <span @mouseenter="show" @mouseleave="hide" 
>bys</span>
        <div v-if="visible">
            白巖鬆
        </div>
    </div>
    `,
    mixins: [base]
})
Vue.component('popup', {
    template: `
    <div>
        <button @click="toggle">Pupup</button>
        <div v-if="visible">
            <span @click="hide" 
>X</span>
            <h4>title</h4>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. In exercitationem beatae facilis? Cumque nesciunt dolorem odit ipsum obcaecati. Possimus saepe dicta, neque harum mollitia provident nisi voluptatibus corrupti minima quasi.
        </div>
    </div>
    `,
    mixins: [base]
})
new Vue({
    el: '#app',
    data: {
        card1: {
            pinned: false,
        },
        card2: {
            pinned: false,
        }
    },
})

index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak] {
        display: none;
    }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <tooltip></tooltip>
        <popup></popup>
    </div>
    <script src="./lib/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

Vue入門（十一）---- mixins

混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。 main.js

Vue入門（十一）---- 計算屬性實現排序功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

Storm入門（十一）Twitter Storm源代碼分析之CoordinatedBolt

WPF自學入門（十一）WPF MVVM模式Command命令

tps xaml 使用 company change 用戶通過命令 AC 聯系人在WPF自學入門（十）WPF MVVM簡單介紹中的示例似乎運行起來沒有什麽問題，也可以進行更新。但是這並不是我們使用MVVM的正確方式。正如上一篇文章中在開始說的，MVVM的

Java基礎入門（十一）之基本數據包裝類以及簡單轉換

數據包 intvalue nbsp 1.5 lse false 永遠 ring jdk 一、基本數據類型包裝類引用數據類型一般為基本數據類型首字母大寫，除了int 、char,其中int的引用數據類型類Integer,char的引用數據類型為Character 關

java多線程快速入門（十一）

lee read .get java多線 als pub syn this ble 在方法上面加synchonizd用的是this鎖 package com.cppdy; class MyThread7 implements Runnable { privat

java多執行緒快速入門（十一）

在方法上面加synchonizd用的是this鎖 package com.cppdy; class MyThread7 implements Runnable { private Integer ticketCount = 100; public boolean falg = tr

Python入門（十一）File檔案方法

Python File(檔案) 方法 file 物件使用 open 函式來建立，下表列出了 file 物件常用的函式：序號方法描述 1 file.close() 關

遊戲開發入門（十一）遊戲引擎架構

該堂課是對遊戲引擎內容的一個概括總結，同時也是對遊戲開發技術的一個相當全面的總結。正如我在開篇所提到的，遊戲引擎架構的學習有助於我們建立一個對遊戲全域性性的認識。筆記與總結（請先學習視訊

Swift入門（十一）——型別轉換與is、as操作

三種操作：is、as？和as！ Swift是強型別語言，但也允許開發者通過is、as？和as！這三種操作來對型別進行判斷和強制轉換。其中is用作型別判斷，而as？和as！則分別是型別轉換的可選形式和強制形式。在這裡強調一下，swift中比較常用的向下轉換（do

React Native入門（十一）之螢幕適配

準備首先，我們在官方文件寬度和高度一節可以知道，RN中單位是dp，這個跟Android中的單位是一致的！官網中： A dp is equal to one physical pixel on a screen with a density of 1

Shell指令碼入門（十一）

在實際開發中，我們的程式可能比較大，需要按模組開發，有不同的子程式每個子程式都是獨立的一個檔案，我們可以在一個主程式中呼叫他們示例： #!/bin/bash clear echo "" echo "1.Add" echo "2.Delete" echo "3.Dis

Apache Flink 零基礎入門（十一）Flink transformation

前面講了常用的DataSource的用法，DataSource其實是把資料載入進來，載入進來之後就需要做Transformatio

Spring Boot 入門（十一）：整合 WebSocket, 實時顯示系統日誌

以前面的部落格為基礎，最近一篇為Spring Boot 入門（十）：整合Redis哨兵模式，實現Mybatis二級快取。本篇部落格主要介紹了Spring Boot整合 Web Socket進行日誌的推送，並實時顯示在頁面上。 1.匯入jar包第一個jar包是websocket的，第二個jar包是關於環形佇列

OpenCV3入門（十一）影象直方圖

1、直方圖的概念灰度直方圖是灰度級的函式，描述的是影象中具有該灰度級的像元的個數。確定影象畫素的灰度值範圍，以適當的灰度間隔為單位將其劃分為若干等級，以橫軸表示灰度級，以縱軸表示每一灰度級具有的畫素數或該畫素佔總像元數的比例值，做出的條形統計圖即為灰度直方圖。灰度直方圖：橫座標是灰度，縱座標是該灰度在影象中

Python爬蟲從入門到放棄（十一）之 Scrapy框架整體的一個了解

object 定義 roc encoding eth obi pipe pos 等等這裏是通過爬取伯樂在線的全部文章為例子，讓自己先對scrapy進行一個整理的理解該例子中的詳細代碼會放到我的github地址：https://github.com/pythonsite/

一步一步學習Vue（十一）

head move 就會基本參數 mode onclick set stat 本篇繼續學習vuex，還是以實例為主；我們以一步一步學Vue（四）中講述的例子為基礎，對其改造，基於vuex重構一遍，這是原始的代碼： todolist.js ; (functio

Openstack入門篇（十一）之neutron服務（控制節點）的部署與測試

驅動 username 禁止普通虛擬主機 group 查看禁用 poi 1.Neutron的介紹　　Neutron 為整個 OpenStack 環境提供網絡支持，包括二層交換，三層路由，負載均衡，防火墻和 *** 等。Neutron 提供了一個靈

深度學習（十一）RNN入門學習

RNN入門學習原文地址：http://blog.csdn.net/hjimce/article/details/49095371 作者：hjimce 一、相關理論 RNN(Recurrent Neural Networks)中文名又稱之為：迴圈神經網路（原來還有一個遞迴神經網路

《SpringBoot從入門到放棄》之第（十一）篇——使用@Scheduled建立定時任務，cron七子表示式的簡單使用

模擬場景：有時候，你需要每天某個點或者每週、每個月讓程式做一些事情，如呼叫介面獲取資料，比如生成資料的報表，或者統計一些資料之類，你除了可以在資料庫建立儲存過程，還可以寫Java定時任務。 O的K，接著上一篇的開發環境。《SpringBoot從入門到放棄》之第（十）篇我們建立一個定時任

Vue入門（十一）---- mixins

混入 (mixins)

相關推薦