85.【Vue-细刷-01】（七）-阿里云开发者社区

85.【Vue-细刷-01】（七）

2023-09-23 82

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 85.【Vue-细刷-01】

(九)、事件处理(v-on)

1.⭐JS原生按钮事件的获取⭐

这里我们发现，当我们点击按钮事件的时候。我们的数据会调用一个箭头函数，这个函数会自带一个event事件的这个函数。我们可以通过这个函数获取点击按钮的value值信息。

存在 event 这个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点我</button>
    <script type="text/javascript">
        var bttn=document.getElementById('btn');
        bttn.onclick=(event)=>{  //当我们点击按钮的时候会带用这个箭头函数
            console.log(event);
        }
    </script>
</body>
</html>

2.七大常用事件处理

标准事件 (v-on)
简写事件 ( : )
传递参数 (event,数据)
阻止默认行为（@click.prevent）
阻止冒泡 (@click.stop)
阻止默认行为+阻止冒泡 (@click.stop.prevent)
键盘事件 (@keyup.enter)
标准事件 (v-on)⭐
我们这里不能用箭头函数否则会导致this转变
绑定的函数 show() 可以加括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来找{{msg}}玩耍</h1>
        <!-- 绑定事件 ---标准方式 -->
        <button v-on:click="show1()">点我打印信息1 (v-on)</button> <!-- 这里我们可以写为 show1() 或则 show1 都可以进行调用 -->
        <br><br>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                msg: '吉士先生'
            },
            methods: {  // 用于配置Vue的方法
                show1: function (event) {  // 这里千万不要用 箭头函数 show1:()=>{},  因为假如我们使用箭头函数，那么我们的this会变成window
                    alert('信息1');
                    console.log(this);    // 这里的this 是指 Vue的实列，vm
                }
    </script>
</body>
</html>

简写事件⭐

我们可以使用@ 代替 v-on:
暗藏着一个事件event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来找{{msg}}玩耍</h1>
        <!-- 绑定事件 ---简写方式 -->
        <button @click="show2">点我打印信息1 (@)</button>
        <br><br>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                msg: '吉士先生'
            },
            methods: {  // 用于配置Vue的方法
                show2(event){
                    alert('信息2');
                    console.log(event.target.innerText); //我们可以使用这个event的这些方法，通过这些方法我们可以进行打印出来button的value值 
        });
    </script>
</body>
</html>

传递参数⭐

传递参数我们需要在绑定事件处添加($event)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来找{{msg}}玩耍</h1>
        <!-- 绑定事件 --- 传递参数 -->
        <button @click="show3($event,654)">点我打印信息2 + 传递的参数</button>  <!-- 我们传递参数的时候，需要在前面保证event,能够传递进去。所以我们要进行$event -->
        <br><br>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                msg: '吉士先生'
            },
            methods: {  // 用于配置Vue的方法
                show3(event,number){
                    console.log(event); //  打印看看是否存在event这个事件
                    alert('信息3---'+number);
                }
        });
    </script>
</body>
</html>

阻止默认行为⭐

我们可以添加修饰符.pervent进行阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来找{{msg}}玩耍</h1>
        <!-- 绑定事件 --- 阻止默认行为   prevent 叫事件修饰符-->
        <a href="https://www.baidu.com" @click.prevent="show4">点我打印信息4 (阻止默认行为)</a>
        <br><br>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                msg: '吉士先生'
            },
            methods: {  // 用于配置Vue的方法
                show4(event){  
                    // event.preventDefault();  //靠程序员进行手动阻止默认行为
                    alert('信息4');
                }
        });
    </script>
</body>
</html>

阻止冒泡⭐

我们可以使用stop进行阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来找{{msg}}玩耍</h1>
        <div @click="show5">
            <button @click.stop="show5">点我打印信息5 (阻止冒泡)</button>
        </div>
        <br>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                msg: '吉士先生'
            },
            methods: {  // 用于配置Vue的方法
                show5(event){
                    event.stopPropagation();  //靠程序员进行手动阻止冒泡
                    alert('信息5');
                }
        });
    </script>
</body>
</html>

阻止冒泡+阻止默认行为⭐

@click.pervent.stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来找{{msg}}玩耍</h1>
        <!-- 绑定事件 ---阻止冒泡及默认行为 事件修饰符都可以连写 并且顺序可以乱写-->
        <div @click="show6">
            <a href="https://www.baidu.com" @click.stop.prevent="show5">点我打印信息6 (阻止冒泡及默认行为)</a>
        </div><br>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                msg: '吉士先生'
            },
            methods: {  // 用于配置Vue的方法
                show6(event){   
                    alert('信息6');  //进行阻止冒泡+默认行为
                }
        });
    </script>
</body>
</html>

键盘事件⭐

我们可以的使用@keyup.entry/编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来找{{msg}}玩耍</h1>
        <!-- 绑定事件 ---标准方式 -->
        <button v-on:click="show1()">点我打印信息1 (v-on)</button> <!-- 这里我们可以写为 show1() 或则 show1 都可以进行调用 -->
        <br><br>
        <!-- 绑定事件 ---简写方式 -->
        <button @click="show2">点我打印信息1 (@)</button>
        <br><br>
        <!-- 绑定事件 --- 传递参数 -->
        <button @click="show3($event,654)">点我打印信息2 + 传递的参数</button>  <!-- 我们传递参数的时候，需要在前面保证event,能够传递进去。所以我们要进行$event -->
        <br><br>
        <!-- 绑定事件 --- 阻止默认行为   prevent 叫事件修饰符-->
        <a href="https://www.baidu.com" @click.prevent="show4">点我打印信息4 (阻止默认行为)</a>
        <br><br>
        <!-- 绑定事件 ---阻止冒泡  stop 叫做事件修饰符-->
        <div @click="show5">
            <button @click.stop="show5">点我打印信息5 (阻止冒泡)</button>
        </div>
        <br>
        <!-- 绑定事件 ---阻止冒泡及默认行为 事件修饰符都可以连写 并且顺序可以乱写-->
        <div @click="show6">
            <a href="https://www.baidu.com" @click.stop.prevent="show5">点我打印信息6 (阻止冒泡及默认行为)</a>
        </div><br>
        <!--  键盘事件  @keyup.键值/keyCode编码。编码兼容性强，尽量用编码 -->
        <input type="text" placeholder="按下回车提示数据7" @keyup.enter="show7">
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                msg: '吉士先生'
            },
            methods: {  // 用于配置Vue的方法
                show1: function (event) {  // 这里千万不要用 箭头函数 show1:()=>{},  因为假如我们使用箭头函数，那么我们的this会变成window
                    alert('信息1');
                    console.log(this);    // 这里的this 是指 Vue的实列，vm
                },
                show2(event){
                    alert('信息2');
                    console.log(event.target.innerText); //我们可以使用这个event的这些方法，通过这些方法我们可以进行打印出来button的value值 
                },
                show3(event,number){
                    console.log(event); //  打印看看是否存在event这个事件
                    alert('信息3---'+number);
                },
                show4(event){  
                    // event.preventDefault();  //靠程序员进行手动阻止默认行为
                    alert('信息4');
                },
                show5(event){
                    event.stopPropagation();  //靠程序员进行手动阻止冒泡
                    alert('信息5');
                },
                show6(event){   
                    alert('信息6');  //进行阻止冒泡+默认行为
                },
                show7(event){
                    //  程序员需要自己判断按键
                    // if (event.keyCode !==13){  //event.keyCode 是指按键的编码，编码13是回车键
                    //     return;
                    // }else{
                    //     alert(event.target.value);  //展示文本框中的数据
                    // }
                    alert(event.keyCode);  //查看按键的编码
                }
            }
        });
    </script>
</body>
</html>

文章标签：

JavaScript

85.【Vue-细刷-01】（七）

(九)、事件处理(v-on)

1.⭐JS原生按钮事件的获取⭐

2.七大常用事件处理

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

85.【Vue-细刷-01】（七）

(九)、事件处理(v-on)

1.⭐JS原生按钮事件的获取⭐

2.七大常用事件处理

热门文章

最新文章

相关课程

相关电子书