Vue(三)

最新推荐文章于 2024-07-12 14:10:05 发布

Bella..

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量101

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_57826863/article/details/128500745

版权

Vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1. 事件

1.1 事件处理

v-on:click/@click是点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
							2.事件的回调需要配置在methods对象中，最终会在vm上；
							3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
							4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button>
			当你点击button时，v-on帮你找名为showInfo的函数 @click简写-->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<!-- $event占位 -->
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>
<!-- 所有被Vue管理的函数都写成普通函数，不要箭头函数 -->
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			//methods里面可以配置很多事件的回调，函数在里面算是写死的
			  // 函数放data也能用，但是data里需要数据代理，写死的函数不需要浪费资源
			methods:{
				showInfo1(event){
					//event身上有个target属性，拿到发生事件的事件目标（按钮）
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm（vue实例对象）
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
</html>

1.2 事件修饰符

捕获阶段由外往内，冒泡阶段由内往外

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<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>
		<!-- 
				Vue中的事件修饰符：
			1.prevent：阻止默认事件（常用）；
			2.stop：阻止事件冒泡（常用）；
		    3.once：事件只触发一次（常用）；
			4.capture：使用事件的捕获模式；
			5.self：只有event.target是当前操作的元素时才触发事件；也能阻止冒泡
			6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
		<!-- @click给一个点击事件，下面在method里定义回调 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			  <!-- 点击a标签会跳转页面（默认），阻止跳转 -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） 点的是按钮，但是冒泡冒到了div身上
			 点击按钮先冒泡button的再冒泡div的-->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

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

			<!-- 使用事件的捕获模式 -->
			  <!-- 对盒子1来说在捕获阶段就开始处理事件了 -->
			<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>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<!-- @scroll是给滚动条加的滚动事件，滚动条一动就往上加
			@wheel是给鼠标滚轮加的滚动事件，鼠标滚一次加1 -->
			<!-- @wheel不加passive时：先滚动鼠标滚轮，触发demo函数调用，函数调用完了才会把滚动条往下走一丢丢
			   加了passive，事件的默认行为（滚动条向下走）
			@scroll本来就是给滚动条的，所以加不加passive，滚动条都会优先响应-->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			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('累坏了')
				}
			}
		})
	</script>
</html>

1.3 键盘事件

@keydown按下键盘不用抬起来就触发了事件，@keyup按下去抬起来才会触发事件

<!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.自定义键名 = 键码，可以去定制按键别名
		-->
		<!-- tab键特殊本身按下就会切走焦点，用@keydown好使（切走也实现功能了），
			@keyup不行，按下还没抬起来就切走了不起作用了 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- @keyup.enter摁下回车才显示别名 
			用键盘上的按键自己绑定事件，按下大小写键调用
			CapsLock两个大写字母，由不同的单词组成，调用@keyup.caps-lock都小写加杠-->
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					//e.keyCode按键编码e.key按键名字
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
					//e.target.value拿到input里面的值
				}
			},
		})
	</script>
</html>