Vue2 方法methods和事件修饰符

效果：

数量：21

+10 构造器内访问外部事件

+ 构造器内访问内部事件

- 构造器内直接写事件

我是一个按钮组件

- 构造器外访问内部事件

事件的修饰符

.stop 阻止事件冒泡  .prevent 阻止提交表单后的默认行为，阻止重新加载表单  .capture 在捕获阶段触发事件  .self 仅当事件在本元素触发时执行事件 .stop.prevent 事件修饰符可以串联使用

代码：

<div id="app2">
    数量：{{ a }}
    <p><button οnclick="add10()">+10</button> 构造器内访问外部事件</button></p>
    <p><button @click="increase($event)">+</button> 构造器内访问内部事件</p>
    <p><button @click="a--">-</button> 构造器内直接写事件</p>
    <p><button-component @click.native="increase"> 组件访问内部事件</button-component></p>
</div>
    <p><button οnclick="app.increase()">-</button> 构造器外访问内部事件</p>

<aside>
    <h1>事件的修饰符</h1>
    <button @click.stop="stopPropagation">.stop 阻止事件冒泡</button>
    <button @submit.prevent="preventDefault">.prevent 阻止提交表单后的默认行为，阻止重新加载表单</button>
    <button @click.capture="useCapture">.capture 在捕获阶段触发事件</button>
    <button @click.self="onlyRevokeOnSelf">.self 仅当事件在本元素触发时执行事件</button>
    <button @click.stop.prevent="cascade">.stop.prevent 事件修饰符可以串联使用</button>
</aside>

<script>
    function add10() { app.a += 10; }

    var btnComponent={ template:'<button>我是一个按钮组件</button>' };

    var app = new Vue({
        el:"#app2",
        data:{
            a:10
        },
        methods:{
            increase:function (event) {
                console.log(event); //event是事件对象
                this.a++;
            }
        },
        components:{
            "buttonComponent":btnComponent
        }
    });
</script>