要點(diǎn)：

• 用v-on click 實(shí)現(xiàn)彈窗，類似Semantic UI 當(dāng)中的http://semantic-ui.com/modules/modal.html#/definition Modeal功能，這里要用到v-on click后面接函數(shù)的用法，以及Vue中的methods表達(dá)方法。
• 彈窗功能需要實(shí)現(xiàn)這個(gè)邏輯，即兩個(gè)觸發(fā)：
  • 點(diǎn)擊一個(gè)按鈕，彈框出來
  • 點(diǎn)擊另外一個(gè)地方，彈框消失
• 與彈窗需要觸發(fā)對應(yīng)的一個(gè)功能是，私密的博客，需要輸入密碼才能看見，在一開始就要運(yùn)行（如刷新這個(gè)操作），而不是點(diǎn)擊觸發(fā)才去運(yùn)行。這里涉及到一個(gè)基礎(chǔ)知識，Vue中的ready，頁面加載好馬上做某事情。

一 基礎(chǔ)知識

v-on click function.png

vue methods.png

Vue ready.png

二 代碼實(shí)戰(zhàn)

先在style標(biāo)簽后面寫一個(gè)黑色遮罩，并做第一個(gè)觸發(fā)，出現(xiàn)彈窗之后，點(diǎn)擊背景，彈窗消失。

說明：

• 其中的v-if="!model.show"是為了配合刷新即現(xiàn)實(shí)訂閱彈窗而寫的代碼。

• 要想調(diào)用，如fadeIn，需要在semantic UI的基礎(chǔ)上加一個(gè)<link rel="stylesheet" href="css/animate.css" media="screen" title="no title">(可以去animate.css這個(gè)網(wǎng)址找到你想要的動畫效果。)

        <div class="ui dimmer fadeIn active" v-if="!modal.show" v-on:click="modalSwitch">
            <div class="ui modal active">
                <h3 class="ui header">This is a header!</h3>
            </div>
        </div>

然后在Vue中添加一個(gè)modal的對象和modalSwitch的函數(shù)。

        <script>
            var vm = new Vue({
                el:"#app",
                // context
                data:{

                    modal:{
                        show:true,
                    },
                    
                    article:{
                        title:"This is a title",
                        content:"Hi there!",
                        fontSize:18
                    },
                    comments:[
                        {name:"John Doe",said:"Great!",show:true},
                        {name:"John Doe",said:"Great!",show:true},
                        {name:"John Doe",said:"Great!",show:true},
                        {name:"John Doe",said:"Great!",show:true},
                    ]
                },
                methods:{
                    modalSwitch:function () {
                        this.modal.show = !this.modal.show  # this 是JS一個(gè)需要注意的東西，python這實(shí)例化有一個(gè)self，與此類似。

                    }
                },
                ready:function () {
                    this.modalSwitch()
                }
            })
        </script>

做第二個(gè)觸發(fā)，在文章后面條件一個(gè)關(guān)注訂閱的按鈕：
<button v-on:click="modalSwitch" class="ui inverted blue button"