学习Vue的第四天

最新推荐文章于 2024-03-10 18:15:56 发布

碌碌无为的勤劳家

最新推荐文章于 2024-03-10 18:15:56 发布

阅读量211

点赞数

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

本文链接：https://blog.csdn.net/wildwofe/article/details/106628101

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件处理

事件修饰符

事件有很多种，主要分为鼠标事件和键盘事件，
这两类典型的JavaScript如下：

鼠标事件：click单击 dblclick双击 mouseover鼠标经过 mouseout鼠标离开等等
键盘事件：keydown键盘按下 keyup键盘抬起等

事件修饰符：主要指我们在Vue事件处理过程中，可以使用它来实现阻止默认行为，阻止事件冒泡或者获取键盘修饰符等基本功能。

使用方式很简单，在v-on指令后使用点号连接事件修饰符即可

鼠标事件修饰符：

stop 阻止事件冒泡
prevent 阻止事件默认行为
capture 捕获内部元素
once 只执行一次

键盘事件修饰符：是keyCode值的别名，指定按键触发事件

enter
tab
delete (捕获“删除”和“退格”键)
esc
space
up
down
left
right

	<body>
		<div id="app">
			<h4>键盘事件</h4>
			<input type="text" @keyup="keyupevent" @keydown="keydownevent">
			<p @mousemove="mousemoveevent">我是监听鼠标事件</p>
			<a href="www.baidu.com" @click.prevent="aclick">百度</a>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			methods: {
				keyupevent() {
					console.log("键盘弹起事件监听");
				},
				keydownevent() {
					console.log("键盘按下事件监听");
				},
				mousemoveevent() {
					console.log("鼠标移动监听事件");
				},
				aclick() {
					console.log("超链接被点击了");
				}
			}
		});
	</script>

页面显示：
在这里插入图片描述

事件对象

在事件处理过程中会用到事件对象，即在事件处理过程中会自动触发一个event事件对象，我们可以从中获取一些内容或做某些事情。

event.type 事件类型
event.target 触发事件的HTML元素
event.currentTarget 事件绑定的元素
event.preventDefault 阻止事件默认行为
event.stoppropagation 阻止事件冒泡

在Vue中使用是事件对象分两步：

传递事件对象
当v-on绑定处理函数时，手动传递事件对象$event,当传递多个参数时，$evnet永远在最后，代表当前对象
接收事件对象
在methods方法中定义函数位置，通过形参接收事件对象

	<body>
		<div id="app">
			<table>
				<tr>
					<td>序号</td>
					<td>名称</td>
					<td>价格</td>
					<td>操作</td>
				</tr>
				<tr v-for="(good,index) in goodsList">
					<td>{{index+1}}</td>
					<td>{{good.name}}</td>
					<td>{{good.price}}</td>
					<td><a href="#" @click.prevent="editItem($event)">编辑</a></td>
				</tr>
			</table>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				goodsList: [
					{name:'iphone',price:'8888'},
					{name:'vivo',price:'4689'},
					{name:'oppo',price:'5999'}
				]
			},
			methods: {
				editItem(event) {
					console.log(event);
					console.log(event.target);
					console.log(event.type);
				}
			}
		});
		/* 
			上面的例子中，存在的最大问题就是大量的HTML元素绑定事件处理函数
			每一个超链接都绑定了一个点击事件，影响程序的执行能力，对移动端性能更差。
			如何解决该问题？
		 */
	</script>

页面显示：
在这里插入图片描述
点击编辑超链接后，控制台输出：

事件委派

借助事件对象实现一个事件委托机制,从而提供程序的性能。

什么是事件委派机制？

事件委派在列表渲染过程中，大部分在v-for指令中，借助event事件对象，在父级元素中绑定事件处理函数，而不是在子元素上绑定事件处理函数。
通过使用事件委派，就可以解决上个例子中的问题。

	<body>
		<div id="app">
			<table @click="editItem($event)">
				<tr>
					<td>序号</td>
					<td>名称</td>
					<td>价格</td>
					<td>操作</td>
				</tr>
				<tr v-for="(good,index) in goodsList">
					<td>{{index+1}}</td>
					<td>{{good.name}}</td>
					<td>{{good.price}}</td>
					<td><a href="#" v-bind:data-index="index">编辑</a></td>
				</tr>
			</table>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				goodsList: [
					{name:'iphone',price:'8888'},
					{name:'vivo',price:'4689'},
					{name:'oppo',price:'5999'}
				]
			},
			methods: {
				editItem(event) {
					// 如果单纯这样去做，会发现点击表格任意位置都会触发（如何解决）
					console.log("点击");
					// console.log(event);
					
					console.log(event.target.nodeName.toLowerCase());
					console.log(typeof event.target.nodeName.toLowerCase());
					// 如果只是想点击a标签时触发该函数，操作如下：
					if (event.target.nodeName.toLowerCase() == 'a') {
						console.log('点击了a标签');
						console.log("dataset-index=" + event.target.dataset.index);
					}
				}
			}
		});
	</script>

表单处理

双向数据绑定指令（v-model）

表单处理主要分为两部分内容：

表单输入绑定，表单输入数据如何与Vue框架中的data数据双向绑定
内容是表单事件处理

在Vue中实现表单双向绑定，直接使用v-model指令进行关联即可；v-model会根据控件类型自动选取正确的方法来更新元素。

	<body>
		<div id="app">
			<div>请输入name值：</div>
			<!-- v-model="name" ==> v-model:value="name" -->
			<input type="text" v-model="name" placeholder="请输入...">
			<hr>
			<div>name={{name}}</div>
			<div>
				性别：
				<input v-model="gender" type="radio" name="gender" value="male">男
				<input v-model="gender" type="radio" name="gender" value="female">女
				<hr>
				你选择的性别：{{gender}}
			</div>
			<div>
				选择省份：
				<select name="" v-model="province">
					<option value="辽宁省">辽宁省</option>
					<option value="湖南省">湖南省</option>
					<option value="广东省">广东省</option>
					<option value="四川省">四川省</option>
				</select>
				<hr>
				你选择的省份是：{{province}}
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				name: '',
				gender: 'male',
				province: ''
			}
		});
	</script>

页面显示：
在这里插入图片描述
在视图中改变数据：

表单事件

表单事件处理，就是表单元素发生变化时会触发响应事件，可以为表单元素绑定事件处理函数。表单事件处理函数如下：

事件	触发控件	说明
focus	text文本框	文本框获取光标焦点
blur	text文本框	文本框失去光标焦点
click	单选按钮、复选框	选中某一个额单选按钮或复选框
change	下拉列表/text文本框	切换下拉列表选项/当文本框失去焦点时，内容发生改变时触发
submit	提交按钮	单击提交按钮（）

	<body>
		<div id="app">
			<div>
				请输入name值：
				<input type="text" v-model="name" @change="handleChange" 
				@focus="handleFocus" @blur="handleBlur" />
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				name: ''
			},
			methods: {
				handleBlur() {
					console.log("文本框失去焦点时触发");
				},
				handleFocus() {
					console.log("文本框获取焦点时触发");
				},
				handleChange() {
					console.log("文本框内容改变");
				}
			}
		});