<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理prevent修饰符</title>
    <style type="text/css">
        div>div{
            border: 1px solid black;
        }
        #outer{
            width: 200px;
            height: 200px;
            background-color: #bbbbbb;
        }
        #inner{
            width: 100px;
            height: 100px;
            background-color: #bc806b;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="outer">
            <div id="inner">
                <a href="http://www.baidu.com" v-on:click.prevent="show('连接被单击')">这是一个链接</a>
            </div>
        </div>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            methods:{
                show(message){
                    alert(message);
                }
            }
        });

        /*
        不要把prevent事件修饰符和stop修饰符混淆。
        prevent修饰符用于取消默认行为，比如单击链接跳转页面，
        单击提交按钮提交表单等；
        而stop事件修饰符用于阻止事件的传播,二者完全不同。
        例如，一个表单按钮如果在事件上加了prevent修饰符，那么
        单击按钮就不会提交表单了。
         */
    </script>
</body>
</html>