实例事件

body>
    <div id="app">
        <p>{{num}}</p>
        <p><button @click="add">add</button></p>
    </div>
    <p><button onclick="reduce()">jian</button></p>
    <p><button onclick="reduceOnce()">jian</button></p>
    <p><button onclick="off()">off</button></p>

</body>
<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            num:1,
        },
        methods:{
            add:function(){
                this.num++;
            }
        }
    });
    app.$on('reduce',function(){  //监听当前实例上的自定义事件。  $on在构造器外面添加事件   接收两个参数，第一个是调用时的事件名称，第二个是一个匿名方法  如果按钮在作用域外部，可以用$emit 执行
        console.log('执行了reduce方法');
        this.num--;
    });
    app.$once('reduceOnceaaa',function(){  //$once  执行一次的事件
        console.log('只执行一次的方法');
        this.num--;
    })
    function reduce(){  
        app.$emit('reduce');  //触发当前实例上的事件。附加参数都会传给监听器回调。  调用上面定义的$on
    }
    function reduceOnce(){   //执行一次的事件
        app.$emit('reduceOnceaaa');//运行上面定义的
    }
    function off(){  //关闭事件
        app.$off('reduce');  //

    }


    //
</script>
</html>