Vue2.0---事件属性绑定 v-on

v-on可以绑定事件属性：click,mouseenter等等，简写为@

<body>
    <div id='app'>
        <p>{{num}}</p>
        <button @click='add'>+</button>
        <button @click='minute'>-</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 12
            },
            methods: {
                add: function() {
                    this.num++
                    console.log();
                },
                minute: function() {
                    this.num--
                },
            }
        })
    </script>
</body>

事件修饰符

时间修饰符可以串联

. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）
. prevent：阻止默认事件的发生
. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响然顺序执行触发的事件。
. once：设置事件只能触发一次，比如按钮的点击等。
. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响
. passive：该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的。
. native：在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。

实例：

<body>
    <div id='app'>
        <div @click='OnOuterDiv'>
            外部div
            <div @click='OnInnerDiv'>内部div</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 12
            },
            methods: {
                OnOuterDiv() {
                    console.log('打印外部div');
                },
                OnInnerDiv() {
                    console.log('打印内部div');
                }
            }
        })
    </script>
</body>

由于html默认事件冒泡，所以点击外部div时，打印出'打印外部div'，点击内部div时，依次打印出'打印内部div'和'打印外部div'。

当添加.stop时间修饰符时：

<div @click.stop='OnInnerDiv'>内部div</div>

阻止冒泡，点击内部div时，只打印出'打印内部div'，

当在外部div添加. capture时，修改为捕获机制。

<div id='app'>
    <div @click.capture='OnOuterDiv'>
        外部div
        <div @click='OnInnerDiv'>内部div</div>
    </div>
</div>

点击内部div时，依次打印出'打印外部div'和'打印内部div'。

当在外部div添加. self时，只有点击自身才会触发。

 <div id='app'>
    <div @click.self='OnOuterDiv'>
        外部div
        <div @click='OnInnerDiv'>内部div</div>
    </div>
</div>

点击外部div时，打印出'打印外部div'，点击内部div时，打印出'打印内部div'，并不会触发外部div。