事件处理-注册时间 // 事件处理-修饰符 // 事件处理-键盘事件的修饰符 // 事件处理-系统修饰符 // 事件处理-鼠标修饰符

其他 2020-02-15 12:06:29 阅读次数: 0

事件处理-注册事件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h1>{{message}}</h1>
        <!-- 当事件的处理代码比较少时，可以直接将代码写到行内。 -->
        <button type="button" v-on:click="message = message.split('').reverse().join('')">颠倒字符串顺序</button>

        <!-- 当事件的处理代码比较多时，可以将代码写到一个单独的函数中，
            然后将函数的名称赋值为 v-on 指令，此时，事件对象会被作为唯一的参数自动传入到函数中。 -->
        <button type="button" v-on:click="sayHello">调用 sayHello() 函数，并自动传入事件对象</button>

        <!-- 如果需要给事件处理函数传递参数，则需要在行内调用处理函数，并为函数传递参数。
            此时，事件对象不会再被自动传入处理函数中，需要通过 $event 变量手动传入。 -->
        <button type="button" v-on:click="greeting('黄聪聪', $event)">调用 greeting() 函数，需要手动传入事件对象</button>
    </div>

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

        new Vue({
            data: {
                message: 'Hello World!'
            },
            methods: {
                sayHello: function (evt) {
                    console.log(evt)
                    console.log(this.message)
                },
                greeting: function (who, evt) {
                    console.log(evt)
                    console.log('你好，' + who, evt)
                }
            }
        }).$mount('#app')

    //    v-on 指令注册事件

    </script>
</body>

</html>

事件处理-修饰符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!-- 使用 prevent 修饰符阻止 a 标签的默认行为 -->
        <a href="" v-on:click.prevent="doThis">点我</a>
        
        <!-- 使用 prevent 修饰符阻止 form 标签的默认行为 -->
        <form action="" method="post" @submit.prevent="onSubmit">
            <p><label>用户名：<input type="text" name="username"></label></p>
            <p><input type="submit" value="登录"></p>
        </form>
        <!-- 使用 stop 修饰符阻止事件传播 -->
        <h1 @click="doThat">
            <a href="" v-on:click.prevent.stop="doThis">点我</a>
        </h1>

        <!-- 使用 once 修饰符注册只执行一次的处理程序 -->
        <h1 @click="doThat">
            <a href="" v-on:click.prevent.stop.once="doThis">点我</a>
        </h1>
        
        <!-- 使用 capture 修饰符让我们的处理程序在捕获阶段执行 -->
        <h1 @click.capture="doThat">
            <a href="" v-on:click.prevent.capture="doThis">点我</a>
        </h1>
        
        <!-- 使用 self 修饰符指定当事件目标（event.target）为自身时才执行处理程序。
            （也就是说，只有鼠标点的目标为 h1 元素时，h1 身上注册的事件才会触发 ） -->
        <h1 @click.self="doThat" style="border: 1px solid green;">
            <a href="" v-on:click.prevent="doThis" style="border: 1px solid red;">点我</a>
        </h1>

    </div>

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

        new Vue({
            data: {
                message: 'Hello World!'
            },
            methods: {
                doThis: function (evt) {
                    // 阻止 a 标签的默认行为
                    // evt.preventDefault();

                    // 阻止事件传播
                    // evt.stopPropagation();

                    console.log('doThis')
                },
                doThat: function (evt) {
                    console.log('doThat')
                },
                onSubmit: function (evt) {
                    // 阻止 form 标签的默认行为
                    // evt.preventDefault();

                    console.log(this.message)
                }
            }
        }).$mount('#app')

    </script>
</body>

</html>

事件处理-键盘事件的修饰符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!-- 使用按键码作为修饰符，就是事件对象中的 event.keyCode 属性对应的值 -->
        <p><input type="text" @keyup.13="onKeyup"></p>
        
        <!-- 使用按键名称作为修饰符，就是事件对象中的 event.key 属性对应的值
            注意，如果按键名称由多个单词组成，则单词要写成小写形式，并且单词之间以连接符（-）分隔，例如，PageUp，应该写成 page-up。
            如果按键名称只有一个单词，则写成小写形式，比如，Enter，应该写成 enter -->
        <p><input type="text" @keyup.page-up="onKeyup"></p>
        <p><input type="text" @keyup.enter="onKeyup"></p>
        
        <!-- 指定多个按键名称时，即可生成组合键，例如，必须要同时按着 Ctrl + b 才能触发下面的事件。 -->
        <p><input type="text" @keyup.ctrl.b="onKeyup"></p>
        
        <!-- 使用自定义的按键名称作为修饰符 -->
        <p><input type="text" @keyup.e="onKeyup"></p>
        <p><input type="text" @keyup.ctrl-b="onKeyup"></p>
    </div>

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

        // 我们还可以为按键指定别名，方便在页面中使用。
        Vue.config.keyCodes = {
            e: 13,  // 为 keyCode 值为 13 的按键（enter）指定别名：e，此操作不会与按键 'e' 冲突，因为 'e' 对应的 keyCode 不是 13
            'ctrl-b': [17, 66]
        }


        new Vue({
            data: {
                message: 'Hello World!'
            },
            methods: {
                onKeyup: function (event) {
                    console.log(event.key)
                    console.log(event.keyCode)
                    console.log(event.target.value)
                }
            }
        }).$mount('#app')

    </script>
</body>

</html>

事件处理-系统修饰符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">

        <!-- 使用系统修饰符配置组合键，例如，ctrl + b -->
        <p><input type="text" @keyup.ctrl.b="onKeyup"></p>
        
        <!-- 使用系统修饰符配置组合操作，例如，下面的按钮必须按着 Ctrl 点击才有效果 -->
        <p><button type="button" @click.ctrl="onClick">按着 Ctrl 点我</button></p>
        
        <!-- 使用 exact 修饰符配置精准的组合操作，组合键必须精准匹配时才有效果
            shift + ctrl + b 无效
            alt + ctrl + b   无效
            ctrl + b         有效 -->
        <p><input type="text" @keyup.ctrl.b.exact="onKeyup"></p>

    </div>

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

        /* 
            系统修饰符：
            ctrl
            alt
            shift
            meta  windows 系统上对应的是 windows 键，Mac 系统上对应的 command 键
         */



        new Vue({
            data: {
                message: 'Hello World!'
            },
            methods: {
                onKeyup: function (event) {
                    console.log(event.key)
                    console.log(event.keyCode)
                    console.log(event.target.value)
                },
                onClick: function (event) {
                    console.log(event)
                }
            }
        }).$mount('#app')

    </script>
</body>

</html>

事件处理-鼠标修饰符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">


        <p><button type="button" @click.left="onClick">鼠标左键点击时触发</button></p>
        <p><button type="button" @click.middle="onClick">鼠标滚轮点击时触发</button></p>
        <p><button type="button" @click.right="onClick">鼠标右键点击时触发</button></p>
        
    </div>

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

        new Vue({
            data: {
                message: 'Hello World!'
            },
            methods: {
                onClick: function (event) {
                    console.log(event)
                }
            }
        }).$mount('#app')

    </script>
</body>

</html>
上头upup
发布了151 篇原创文章 · 获赞 1 · 访问量 1867
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_45802159/article/details/103817084
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022