VUE 事件修饰符以及按键码

VUE 事件修饰符以及按键码

之前写了一篇关于事件处理的文章，这篇的时间修饰符主要就是来修饰之前事件处理的事件名的，目的是为了扩展事件的功能。

事件修饰符

  • .stop：阻止单击事件继续传播，event.stopPropagation()
  • .prevent：阻止事件默认行为 event.preventDefault()
  • .once：点击事件将只会触发一次
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
</head>

<body>

    <div id="app">
        <h3>事件处理函数 v-on 或者 @</h3>
        <button v-on:click="say">Say {{msg}}</button>
        <!-- $event 代表的是原生的DOM事件 -->
        <button @click="warn('王佳伟',$event)">Warn</button>
        <hr>
        <h3>事件修饰符</h3>
        <!-- 1. 防止单击事件继续传播 -->
        <!-- 如果不加 .stop ，点击按钮之后，执行doThis函数，执行完后，todo函数也会被执行，也就是说，会先弹出doThis，然后弹出todo -->
        <div @click="todo">
            <button @click="doThis">单击事件会继续传播</button>
        </div>
        <br>
        <div @click="todo">
            <!-- .stop 的作用是阻止事件的传播，此时，只会弹出 doThis -->
            <button @click.stop="doThis">单击事件会组织继续传播</button>
        </div>
        <br>
        <!-- 2. 阻止时间默认行为 -->
        <a href="https://www.cnblogs.com/wjw1014/" @click.prevent="doStop">我的博客园博客</a>
        <br><br>
        <!-- 3. 点击事件只会触发一次 -->
        <button @click.once="doOnly">点击只会触发一次：{{num}}</button>


    </div>

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

    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '你好，王佳伟',
                num: 0
            },
            // 定义事件处理函数
            methods: {
                say: function (event) {
                    // event 代表的是DOM的原生事件，vue会自动的而将它传入进来。
                    alert(this.msg)
                    alert(event.target.innerHTML)
                },
                warn: function (name, event) {
                    // 如果说函数有多个参数，而又需要使用原生事件，则需要使用$event作为参数传入
                    alert(name + '  ' + event.target.tagName)
                },
                doThis: function () {
                    alert("doThis ...")
                },
                todo: function () {
                    alert("todo ...")
                },
                doStop: function () {
                    alert("doStop ... href 默认行为已被阻止！")
                },
                doOnly: function () {
                    this.num++
                }
            },
        })
    </script>

</body>

</html>

在这里插入图片描述

按键修饰符

格式：

v-on:keyup.按键名   或者   @keyup.按键名

常用的按键名：

  • .enter 回车键
  • .tab Tab键
  • .delete Delete键
  • .esc ESC键
  • space 空格键
  • up 向上键
  • down 向下键
  • left 向左键
  • right 向右键

案例：

<input  v-on:keyup.enter = "submit"   />

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
</head>

<body>

    <div id="app">
        <h3>事件处理函数 v-on 或者 @</h3>
        <button v-on:click="say">Say {{msg}}</button>
        <!-- $event 代表的是原生的DOM事件 -->
        <button @click="warn('王佳伟',$event)">Warn</button>
        <hr>
        <h3>事件修饰符</h3>
        <!-- 1. 防止单击事件继续传播 -->
        <!-- 如果不加 .stop ，点击按钮之后，执行doThis函数，执行完后，todo函数也会被执行，也就是说，会先弹出doThis，然后弹出todo -->
        <div @click="todo">
            <button @click="doThis">单击事件会继续传播</button>
        </div>
        <br>
        <div @click="todo">
            <!-- .stop 的作用是阻止事件的传播，此时，只会弹出 doThis -->
            <button @click.stop="doThis">单击事件会组织继续传播</button>
        </div>
        <br>
        <!-- 2. 阻止时间默认行为 -->
        <a href="https://www.cnblogs.com/wjw1014/" @click.prevent="doStop">我的博客园博客</a>
        <br><br>
        <!-- 3. 点击事件只会触发一次 -->
        <button @click.once="doOnly">点击只会触发一次：{{num}}</button>
        <hr>
        <h3>按键修饰符或按键码</h3>
        <!-- 按下回车键执行 -->
        <input type="text" @keyup.enter="keyEnter"><br><br>
        <!-- 按下空格键执行 -->
        <input type="text" @keyup.space="keySpace"><br><br>
        <!-- 其实还可以使用按键码，比如13也是回车，自己查 -->
        <input type="text" @keyup.13="keyDown">
        <!-- 按键码查询地址： https://www.bejson.com/othertools/keycodes/ -->

    </div>

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

    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '你好，王佳伟',
                num: 0
            },
            // 定义事件处理函数
            methods: {
                say: function (event) {
                    // event 代表的是DOM的原生事件，vue会自动的而将它传入进来。
                    alert(this.msg)
                    alert(event.target.innerHTML)
                },
                warn: function (name, event) {
                    // 如果说函数有多个参数，而又需要使用原生事件，则需要使用$event作为参数传入
                    alert(name + '  ' + event.target.tagName)
                },
                doThis: function () {
                    alert("doThis ...")
                },
                todo: function () {
                    alert("todo ...")
                },
                doStop: function () {
                    alert("doStop ... href 默认行为已被阻止！")
                },
                doOnly: function () {
                    this.num++
                },
                keyEnter: function () {
                    alert("当前按的是回车键！")
                },
                keySpace: function () {
                    alert("当前按的是空格键！")
                },
                keyDown:function(){
                    alert("当前按键码是13！")
                }
            },
        })
    </script>

</body>

</html>

在这里插入图片描述

源码位置：https://gitee.com/wjw1014/vue_learning_course

posted @ 2020-07-27 16:27  我是ed  阅读(618)  评论(0)  编辑  收藏  举报