要点：

• 用v-on click 实现弹窗，类似Semantic UI 当中的http://semantic-ui.com/modules/modal.html#/definition Modeal功能，这里要用到v-on click后面接函数的用法，以及Vue中的methods表达方法。
• 弹窗功能需要实现这个逻辑，即两个触发：
  • 点击一个按钮，弹框出来
  • 点击另外一个地方，弹框消失
• 与弹窗需要触发对应的一个功能是，私密的博客，需要输入密码才能看见，在一开始就要运行（如刷新这个操作），而不是点击触发才去运行。这里涉及到一个基础知识，Vue中的ready，页面加载好马上做某事情。

一 基础知识

v-on click function.png vue methods.png Vue ready.png

二 代码实战

---

先在style标签后面写一个黑色遮罩，并做第一个触发，出现弹窗之后，点击背景，弹窗消失。

说明：

• 其中的v-if="!model.show"是为了配合刷新即现实订阅弹窗而写的代码。

• 要想调用，如fadeIn，需要在semantic UI的基础上加一个<link rel="stylesheet" href="css/animate.css" media="screen" title="no title">(可以去animate.css这个网址找到你想要的动画效果。)

        <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的函数。

        <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>

---

做第二个触发，在文章后面条件一个关注订阅的按钮：
<button v-on:click="modalSwitch" class="ui inverted blue button"