vue-事件修饰符

1）默认行为和阻止默认行为

<body>

    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- <button v-on:click="showInfo">点我提示信息</button>  -->
      <a href="https:www.baidu.com" @click="showInfo">点我提示信息</a>
 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示

      
        const vm =  new Vue({
        el:'#root',
        data:{
        name:'爪哇开发'
        },
        methods: {
        showInfo(event){
            alert('同学你好')
        }
    }

        })
        
    </script>
    
</body>

打开之后效果如下：

大家可以发现，在点击了showInfo事件并且确定之后，页面自动跳转到超链接了。这是一个默认事件。那么如何阻止这个默认行为呢？可以将时间改成如下形式。这样就不会跳转了。

以上就演示了默认行为和阻止事件默认行为

2）事件冒泡和阻止事件冒泡

<style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>

    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- 阻止默认事件 （常用） -->
      <a href="https:www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
      <div class="demo1" @click="showInfo">
        <button @click="showInfo">点我提示信息</button>
      </div>
 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示

      
        const vm =  new Vue({
        el:'#root',
        data:{
        name:'爪哇开发'
        },
        methods: {
        showInfo(event){
            alert('同学你好')
        }
    }

        })
        
    </script>
    
</body>