v-on修饰符使用

v-on修饰符使用

在某些情况下，我们拿到的event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop-调用event.stopPropagtion().

<div id="app">
        <!-- 1 .stop修饰符的使用 -->
        <div @click="divClick">
            aaaaaaa
            <button @click.stop="btnClick">按钮</button>
        </div>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！'
            },
            methods: {
                btnClick() {
                    console.log("btnClick");

                },
                divClick() {
                    console.log("divClick");

                }
            }
        })
    </script>

.prevent-调用event.preventDefault().

<!-- 2 .prevent修饰符的使用 -->
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！'
            },
            methods: {
                submitClick() {
                    console.log('submitClick');
                }
            }
        })
    </script>

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

<!-- 3  .监听某个键盘的键帽 -->
    <input type="text" @keyup.enter="keyup">

<script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！'
            },
            methods: {
                keyup() {
                    console.log('keyup');
                }
            }
        })
    </script>

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

<!-- 4  .once修饰符的使用 -->
    <button @click.once="btn2Click">按钮2</button>
<script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！'
            },
            methods: {       
                btn2Click() {
                    console.log('btn2Click');
                }
            }
        })
    </script>