Vue的修饰符

事件修饰符的指令：

.stop阻止冒泡

<a v-on:click.stop="handle">跳转</a>

.prevent阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

用法代码：

  <body>
    <div id="app">
        <div>{{num}}</div>
        <div v-on:click='handle0'>
            <!-- .stop阻止冒泡 -->
            <button v-on:click.stop='handle1'>点击1</button>
        </div>
        <div>
            <!-- .prevent阻止默认行为 -->
            <a href="http://www.baidu.com" v-on:click.prevent="handle2">百度</a>
        </div>
    </div>



    <script type="text/javascript" src="/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app', // 选择ID标签 （元素的载位置） 把数据关联到页面的某个位置
            data:{
                num:0
            },
            methods:{
                handle0:function() {
                    this.num++;
                },
                handle1:function(event) {
                    // 传统方式阻止冒泡
                    // event.stopPropagation();
                },
                handle2:function(event) {
                    // 原生JS阻止默认行为
                    // event.preventDefault();
                }
            }
        });
    </script>
</body>