2020-10-07 vue学习笔记——事件处理

1、监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

2、事件处理方法

实例1：实现一个鼠标点击按钮弹出“1”的事件

注意：由于许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。 v-on 还需要接收一个需要调用的方法名称。

<div id="app">
	{{msg}}
	//绑定data中的msg
	<input type="button" v-on:click="tanchu" value="按钮" />
	//这里v-on监听tanchu函数，这里的”弹出“就是需要调用的方法名称
</div>

var vm = new Vue({
				el:"#app",
				data: {
					msg:'hello world!'
				},
				methods:{
				//在vue实例的‘methods’对象定义方法
					tanchu:function(){
						alert(1);
					}
				}
			});

实例2：实现点击按钮在页面刷新点击次数

<div id="app">
	这个按钮被点击了{{number}}次
	//这里绑定了data中的number
	<input type="button" v-on:click="number+=1" value="按钮" />
	//这里实现每次鼠标点击按钮让number+1
</div>

var vm = new Vue({
				el:"#app",
				data: {
					number:1
				},
});

执行结果

通过上述例子可以看出，一个完整的事件需要有事件源、具体的事件和事件处理函数

3、内联处理器中的方法（传参）

<div id="app">
	{{number}}
	<input type="button" v-on:click="tanchu('芜湖')" value="按钮" />
	//v-on:click="tanchu('芜湖')中的“tanchu”是调用方法，而（‘芜湖’）才是输出的内容
</div>

var vm = new Vue({
				el:"#app",
				data: {
					msg:'hello world!',
					number:1
				},
				methods:{
					tanchu:function(xiaoxi){
						alert(xiaoxi);
						//这里的'xiaoxi'是参数，不是输出内容
					}
				}
			});

若要获取事件对象则需要使用第二个参数

<input type="button" v-on:click="tanchu('芜湖',$event)" value="按钮" />

methods:{
			tanchu:function(xiaoxi,event){
			alert(xiaoxi);
		}

4、事件修饰符

说到事件修饰符，先回顾一下修饰符的概念：修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
.stop

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

.prevent

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

.capture

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

.self

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

.once

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

.passive

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

1、.stop案例
先来看一个没有阻止冒泡事件的代码：

先写一些盒子，div1和div2都绑定点击事件

<div id="app">
			<div class="div1" v-on:click='tk1'>
				<div class="div2" v-on:click='tk2'></div>
			</div>
		</div>

接下来在methods对象里面写两个弹出事件的函数tk1与tk2

var vm = new Vue({
				el:"#app",
				data: {

				},
				methods:{
					tk1:function(){
						alert("点击外面");
					},
					tk2:function(){
						alert("点击里面");
					}
				}
			});

运行结果：

这里可以看到，点击中间部分的盒子结果页面出现两次弹窗，这里说明发生了冒泡事件。

接下来需要阻止冒泡事件，实现点击中间的盒子只进行一次弹窗

<div id="app">
			<div class="div1" v-on:click='tk1'>
				<div class="div2" v-on:click.stop='tk2'></div>
				//只需在子节点里面添加一个stop就可阻止往父节点冒泡
			</div>
		</div>

---

2、.prevent案例
同样的，先来一个没有采用.prevent的事件。给出代码：

<form v-on:submit.prevant="tijiao">
				<input type="text" name="nuserName" />
				<input type="submit" value="提交" />
			</form>

var vm = new Vue({
				el:"#app",
				data: {

				},
				methods:{
					tijiao:function(){
						console.log(1);
					}
				}
			});

运行结果：

可以在页面中看到，不断点击提交会一直刷新，而得不到打印在页面上的1
解决方法：

<form v-on:submit.prevent="tijiao">
        <input type="text" name="userName"/>
        <input type="submit" value="提交"/>
    </form>

运行结果：

添加了.prevent后，可以看到页面不会刷新，点击多少次就打印到页面多少次

5、 键值修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
案例1：
在输入框按下键盘任意键，打印出相应的key值

<div id="app">
	{{msg}}
	<input type="text" v-on:keydown="keyDown" />
</div>

var vm = new Vue({
		el:"#app",
		data: {
			msg:'hello world!'
		},
		methods:{
			keyDown:function(e){
				console.log(e.keyCode);
			}
		}
	});

运行效果：

案例2：
现在需要按下回车键，文本框的内容直接打印在页面上

<div id="app">
			{{msg}}
			<input type="text" v-on:keydown="keyDown" />
		</div>

var vm = new Vue({
				el:"#app",
				data: {
					msg:''
				},
				methods:{
					keyDown:function(e){
						console.log(e.keyCode);
						//这里是打印键值
						
						if(e.keyCode==13){
						//回车键的值是13，当键值为13时，直接触发这一条件运行以下代码
							this.msg=e.target.value;
							e.target.value="";
						}
					}
				}
			});

运行结果：

还有一种方法可以同样实现这种效果：

<div id="app">
			{{msg}}
			<input type="text" v-on:keydown.13="keyDown" />
			//当按下的键值为13时，调用keyDown事件
		</div>

var vm = new Vue({
			el:"#app",
			data: {
				msg:''
			},
			methods:{
				keyDown:function(e){
					console.log(e.keyCode);
					
						this.msg=e.target.value;
						e.target.value=""
					//这里与前面的区别，不用if来判断key值是否为13.这样写要简便很多
				}
			}
		});

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

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

6、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
案例：
在输入框按住alt+c要求在打印出clear

<div id="app">
	<input @keyup.alt.67="clear" />
</div>

var vm = new Vue({
				el:"#app",
				data: {
					
				},
				methods:{
					
					clear:function(){
						console.log("clear");
					}
				}
			});

执行结果：

7、鼠标按钮修饰符

.left
.right
.middle