07.事件处理

最新推荐文章于 2023-12-09 18:07:06 发布

M丶GentleMan

最新推荐文章于 2023-12-09 18:07:06 发布

阅读量38

点赞数

分类专栏： Vue学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ma628991/article/details/121390700

版权

Vue学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

01.事件处理的基本使用

<!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 type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <h2>科目：{{name}}</h2>
        <h2>地点：{{address}}</h2>
        <!-- <button v-on:click='showInfo'>点我弹窗</button> -->
        <!-- v-on:click='showInfo' 简写@click='showInfo' 如下： -->
        <button @click='showInfo1'>点我弹窗1号</button>
        <!-- 可以传参数，但是要加（$event）,不然会把event搞丢。 -->
        <button @click='showInfo2($event,888)'>点我弹窗2号</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                name: 'vue',
                address: '河南'
            },
            methods: {
                // 里面的this指向的是vm，不能使用箭头函数，否则指向的是window，后期会报错的。
                showInfo1() {
                    alert('Hellow，我是一号')
                },
                showInfo2(event, num) {
                    console.log(num);
                    alert('Hellow，我是二号')

                }
            }
        })
    </script>
</body>

</html>

02.事件修饰符

<!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 type='text/javascript' src="../JS/vue.js"></script>
    <style>
        button {
            font-size: 18px;
            color: red;
            height: 50px;
            margin: 30px;
        }
    </style>

</head>

<body>
    <div id="root">
        <h1>欢迎来到{{name}}</h1>

        <!-- 1.因为a标签是链接，点击会跳转，在后面加上：prevent阻止 -->
        <a href="https://www.baidu.com/" @click.prevent='showInfo'>
            知识点1.我是链接，但是我不想跳转,所以我使用pervent阻止默认事件
        </a>

        <!-- 2.stop阻止事件冒泡 -->
        <!-- 解释：因为冒泡的存在,点击按钮会弹窗,但是外面有个div有同样的函数,所以执行完按钮,div的函数也会在执行 -->
        <div @click='showInfo'>
            <button @click.stop='showInfo'>知识点2.我会冒泡o,我用stop阻止冒泡事件</button>
        </div>

        <!-- 3.once：事件只触发一次 -->
        <button @click.once='showInfo'>知识点3.我是按钮，我只想弹窗一次，我用once禁止。</button>

        <!-- 4.captrue:使用事件的捕捉模式 -->
        <!-- 解释：先捕获后冒泡，事件一般是冒泡执行，比如有2个div，我点击div，里面的输出2，外面的输出1，
            输出顺序是2 1，但是增加captrue是输出1 2 -->

        <!-- 5.self，只有event.target是当前操作元素的时候才执行操作 -->
        <!-- 解释：如果有2个相同的按钮，我想输出我点击的按钮的内容，可用self，不然会输出2次 -->

        <!-- 6.passive：事件的默认行为立即执行，无须等待时间回调或执行完毕 -->
        <!-- 在Vue第15节课 -->
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                name: 'vue学习'
            },
            methods: {
                showInfo() {

                    alert('vue欢迎你')
                }

            }
        })
    </script>
</body>

</html>

03.键盘事件

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>键盘事件</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

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

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

				3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
							(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
							(2).配合keydown使用：正常触发事件。

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

				5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
		-->
	<div id="root">
		<h2>欢迎学习{{name}}</h2>
		<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		<!-- 如果我们的需求是自定义按钮实现效果，我们可如下： -->
		<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		<!-- 如果我们的需求是按下ctrl + y 才能实现效果，我们可如下： -->
		<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">

	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。
	Vue.config.keyCodes.huiche = 13  // 自定义了一个别名按键，不推荐

	new Vue({
		el: '#root',
		data: {
			name: 'Vue'
		},
		methods: {
			showInfo(e) {
				// console.log(e.key,e.keyCode)
				console.log(e.target.value)
			}
		},
	})
</script>

</html>