VUE 修饰符

div id="app">
    !-- .self修饰符 只有点击自身的时候才会被触发 -->
    div class="div1" @click.self="fn1">
        div1
        <!-- .stop修饰符 阻止冒泡 -->
        <div class="div2" @click="fn2">
            div2
        </div>
    </div>
    <!-- .prevent 阻止默认事件的触发 -->
    <a href="http://www.baidu.com" @click.prevent="a">点我试试</a>
    <br>
    <!-- 给表单元素使用的修饰符 -->
    <!-- @keyup.enter  表示按下回车抬起的时候触发b方法 -->
    <!-- @keyup.13 也可以使用keyCode来表示 -->
    <input type="text" @keyup.13="b" v-model="msg">
    <h1>{{msg}}</h1>
    <!-- 按下回车 清空输入框里面的字 -->
</div>
<script src="./vue2.6.14.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: ''
        },
        methods: {
            fn1() {
                alert('div1')
            },
            fn2() {
                alert('div2')
            },
            a() {
                alert('试试就试试')
            },
            b() {
                this.msg = "";
                alert('输入成功')
            }
        }
    });
</script>