要點：

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

一 基礎(chǔ)知識

v-on click function.png

vue methods.png

Vue ready.png

二 代碼實戰(zhàn)

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

說明：

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

• 要想調(diào)用时甚，如fadeIn，需要在semantic UI的基礎(chǔ)上加一個<link rel="stylesheet" href="css/animate.css" media="screen" title="no title">(可以去animate.css這個網(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中添加一個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一個需要注意的東西，python這實例化有一個self开镣，與此類似刀诬。

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

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