08、Vue事件处理

最新推荐文章于 2024-05-16 14:05:31 发布

Dhun-LI

最新推荐文章于 2024-05-16 14:05:31 发布

阅读量81

点赞数

分类专栏： Vue入门-零基础进阶文章标签： vue js

Dhun_LI的博客

本文链接：https://blog.csdn.net/weixin_43691818/article/details/108517530

版权

Vue入门-零基础进阶专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue事件处理

今天学习了vue事件处理，其中包括：1.绑定监听、2.事件修饰符、3.按键修饰符，三者组合到一起回事什么效果呐，一起来看看吧：
在这里插入图片描述
上面就是整体的效果图了，通过点击按钮获取内容，输入框那里是输入内容后，点击enter按键就显示输入框当前内容，接下来一起看看通俗易懂的完整代码吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件处理</title>
</head>
<body>
<div id="example">
    <h2>1.绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('test2')">test2</button>
    <button @click="test3">test3</button>
    <button @click="test4(123,$event)">test4</button>
    <h2>2.事件修饰符</h2>
    <!--当两个div嵌套时会出现事件冒泡-->
    <div style="width:200px;height:200px;background: red" @click="test5">
        <div style="width:100px;height:100px;background: blue" @click.stop="test6"></div><!--阻止冒泡行为-->
    </div>
    <!--事件的默认行为-->
    <a href="http://www.baidu.com" @click.prevent="test7">去百度</a><!--阻止事件的默认行为-->
    <h2>3.按键修饰符</h2>
    <!--实现内容：在输入框输入任意内容，按下enter键后显示输入框当前内容-->
    <input type="text" @keyup.13="test8"><!--给当前输入框加监听-->
    <input type="text" @keyup.enter="test8"><!--@keyup.13和@keyup.enter一样，13是enter的keyCode值-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#example',
        data:{
            test1(){
                alert('test1')
            },
            test2(msg){
                alert(msg)
            },
            test3(event){
                alert(event.target.innerHTML)
            },
            test4(number,event){
                alert(number+'--'+event.target.innerHTML)
            },
            test5(){
                alert('out')
            },
            test6(){
                // event.stopPropagation()
                alert('inner')
            },
            <!--以前阻止事件的默认行为的方式-->
            // test7(event){
            //     event.preventDefault()
            //     alert('点击了')
            // },
            test7(){
                alert('点击了')
            },
            //点enter键显示内容，以前的方法
            // test8(event){
            //     if(event.keyCode===13){//每个按键都有一个keyCode
            //         alert(event.target.value+' '+event.keyCode)//获取值
            //     }
            // },
            test8(event){
                alert(event.target.value)//获取值
            }
        }
    })
</script>
</body>
</html>

其实一些重要的已经都写在注释里了，在这就不一一说明了，特别提醒一下，虽然@keyup.13和@keyup.enter一样，但是仅仅是特殊按键，像字母a、b、c……这些没有特殊名称的就无法通过像@keyup.enter一样显示出来，但是每个按键都有对应的keyCode值。
就到这里了，小白养成ing~~

Dhun-LI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
08、Vue事件处理

Vue事件处理今天学习了vue事件处理，其中包括：1.绑定监听、2.事件修饰符、3.按键修饰符，三者组合到一起回事什么效果呐，一起来看看吧：上面就是整体的效果图了，通过点击按钮获取内容，输入框那里是输入内容后，点击enter按键就显示输入框当前内容，接下来一起看看通俗易懂的完整代码吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&
复制链接

扫一扫

专栏目录