事件处理/_事件处理如何使用-CSDN博客

本文链接：https://blog.csdn.net/hhcharming/article/details/123459160

一.事件处理

二.事件修饰符

二.键盘事件

一.事件处理

事件的基本使用

1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数，不要用箭头函数！否则this就不是VM了

4.methods中配置的函数，都是被vue所管理的函数，this指向是vm或组件实例对象

5。@click = "demo" 和@ click ="demo($event)"效果一致，但后者可以传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>初识vue</title>
		<script type="text/javascript" src="../js/vue.js">
			alert("这是我的第一行JS代码")
			document.write("看我出不出来")
		</script>
	</head>
	<body>
        <!-- 容器 -->
        <div id="root">
            <h1>hello{{name.toUpperCase()}}</h1>
            <h1>{{address}}</h1>
            <hr/>
            <button v-on:click="fun1">点完不传承</button>
            <button @click="fun2(66,$event)">点我传参</button>
        </div>
        
		<script type="text/javascript" >
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root',
            data:{
                name:'atguigu',
                address:'北京'
            },
            methods:{
                fun1(){
                    alert("nihhao")
                    console.log(this===vm)
                },
                fun2(number,a){
                    console.log(number,a)
                }
            }
        })
        console.log(vm)
       
        </script>
	</body>
</html>

要把方法塞到vue模板实例里，不能在vue外边。因为模板只能和容器对应起来

methods可以将时间的回调配置到Vue实例中

二.事件修饰符

Vue的事件修饰符

1.prevent:阻止默认事件（常用）

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture:使用事件的捕获模式

5.self：只有event，target是当前操作元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>初识vue</title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
        <style>
            *{
                margin-top: 20px;
            }
            .demo1{
                height:50px;
                background-color: skyblue;
            }
            .box1{
                padding: 5px;
                background-color: skyblue;
            }
            .box2{
                padding: 5px;
                background-color: orange;
            }
            .list{
                width: 200px;
                height: 200px;
                background-color: peru;
                overflow: auto;
            }
            li{
                height: 100px;

            }
        </style>
	</head>
	<body>
        <!-- 容器 -->
        <div id="root">
            <h2>欢迎来到{{name}}</h2>
            <!-- 阻止默认事件 -->
            <a href ="http://atguigu.com" @click.prevent="showInfo">点我</a>
            <!-- 修饰符可以连续写 -->
            <!-- 阻止事件冒泡 -->
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我</button>
            </div>
            <!-- 事件一次 -->
            <button @click.once="showInfo">点我</button>
            <!--使用事件捕获模式  -->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)"> 
                    div2
                </div>
            </div>
            <!-- 只有event target是当前操作元素时才触发事件 -->
            <div class="demo1" @click.self="showInfo">
                <button @click="showInfo">点我</button>
            </div>
            <!-- 事件默认行为立即执行无需等待事件回调 -->
            <ul @scroll="demo" class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        
		<script type="text/javascript" >
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root',
            data:{
                name:'atguigu',
                address:'北京'
            },
            methods:{
                showInfo(e){
                    //alert("同学你好")
                    console.log(e.target)
                },
                showMsg(msg){
                    console.log(msg)
                },
                demo(){
                   for (let i=0;i<100000;i++){
                        console.log("@")
                    }
                  console.log("@")  
                }
            }
        })
        console.log(vm)
       
        </script>
	</body>
</html>

说明：1.默认行为是跳到网址

2.冒泡是外层会弹，此处在里层加stop，阻止外层。外层不再弹

3.一点弹窗，再点不再弹窗

4.先事件捕获，后时间冒泡；捕获阶段由外向内，冒泡由内向外。默认再冒泡阶段处理事件，这里改为捕获阶段处理。变为了外层先处理，内层后处理

二.键盘事件

Vue中常用的按键别名：

回车 =>enter

删除 =>delete（捕获”删除“和“退格”键）

退出 =>esc

空格 =>spcace

换行 =>tab(特殊，必需配合keydown使用)

上 =>up

下=>down

左 =>left

右 =>rigth

2.vue未提供别名的按键，可以使用按键原始的key 值去绑定，但注意要转为kebab-case(短横线命名)

说明：console.log(e.key,e.keyCode) //可打印键名称和键码，如果是大写需要改为消息加下划线组成

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

（2）配合key使用:正常触发事件

4.也可以使用keyCode去指定具体按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
	<head>
		<meta charset "UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
			alert("这是我的第一行JS代码")
			document.write("看我出不出来")
		</script>
	</head>
	<body>
        <div id="root">
            <h2>欢迎</h2>
            <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
        </div>
	</body>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        Vue.config.keyCodes.huiche = 13 //定义一个别名
        new Vue({
            el:'#root',
            data:{
                name:'atguigu',
            },
            methods:{
                showInfo(e){
                    //console.log(e.key,e.keyCode)
                    //if(e.keyCode !== 13) return
                    console.log(e.target.value)
                    
                }
            }
        })
       
        </script>
</html>