vue混合mixins

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <tooltip></tooltip>
    <popup></popup>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js:

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

Vue.component('tooltip', {
    template:`
        <div>
            <span @mouseenter="show" @mouseleave="hide">tooltip</span>
            <div v-if="visible">
                The most surprising and memorable thing for me was that first sight of the ship -- seeing how big and immense it is," Balwin Yeung, Royal Caribbean's director of sales and marketing in Hong Kong, tells CNN Travel.
            </div>
        </div>
    `,
    mixins: [base]

})

Vue.component('popup', {
    template: `
        <div>
            <button @click= "toggle">按钮</button>
            <p><a href="#" @click="hide">X</a></p>
            <div v-if="visible">The Symphony of the Seas is home to the tallest waterslide at sea, the ocean's fastest Internet and more works of art than the Louvre has paintings.</div>
        </div>    
    `,
    mixins: [base]
})

new Vue({
    el: '#app'
})

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页