07_事件处理

最新推荐文章于 2022-10-07 00:24:46 发布

xixihaha_coder

最新推荐文章于 2022-10-07 00:24:46 发布

阅读量80

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123167555

版权

Vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

07_事件处理

1.事件的基本使用

<!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>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<!-- 

事件的基本使用:
1.使用v-on : xxX或@xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm 上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;
 
-->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- v-on:click 相当于 @click -->
        <!-- <button v-on:click="showInfo1">点我提示信息</button> -->
        <button @click="showInfo1">点我提示信息1</button>
        <!-- 传参 -->
        <button @click="showInfo2(66,$event)">点我提示信息2</button>
   
    </div>

</body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        new Vue({
            el: '#root',
            data: {
                name: 'vue'            
            },
            methods:{
                showInfo1(event){
                    alert('同学你好1')
                },
                showInfo2(number){
                    console.log(number);
                }
            }

        });

    </script>


</html>

2.事件修饰符

<!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>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<!-- 

Vue中的事件修饰符:
1.prevent:阻止默认事件（常用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件:
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

修饰符可以连写
 -->
<style>
    *{
        margin-top: 20px;
    }
    .demo1 {
        height: 50px;
        background-color: aqua;
    }
</style>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <!-- 1.prevent:阻止默认事件（常用）; -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        
        <!-- 2.stop:阻止事件冒泡（常用）; -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- 3.once:事件只触发一次（常用）; -->
        <button @click.once="showInfo">点我提示信息</button>
       
    </div>

</body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        new Vue({
            el: '#root',
            data: {
                name: 'vue'            
            },
            methods:{
                showInfo(e){
                    // e.preventDefault() //阻止跳转
                    alert("你好")
                }
            }

        });
    </script>

</html>

3.键盘事件

<!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>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<!-- 
    1.Vue中常用的按键别名:
        回车 => enter
        删除=> delete(捕获“删除”和“退格”健)
        退出=> esc
        空格=>space
        换行=> tab(特殊 配合keydown)
        上=>up
        下=> down
        左=>left
        右=> right

 -->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>

</body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        new Vue({
            el: '#root',
            data: {
                name: 'vue'            
            },
            methods:{
                showInfo(e){
                    // if(e.keyCode !==13 ) return
                    console.log(e.target.value);
                }
            }

        });

    </script>


</html>

xixihaha_coder

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07_事件处理

07_事件处理1.事件的基本使用<!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">
复制链接

扫一扫