vue事件修饰符

一、事件修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

		.stop:阻止冒泡事件
		.prevent:阻止默认事件
		.captrue:触发事件捕获
		.self:当事件在元素本身时触发回调
		.once:只执行一次
		.passive:Vue 还对应 addEventListener 中的 passive 选项提供了 .passive修饰符

   
     
     
     
     

<a v-on:click.stop="doThis">a>

<form v-on:submit.prevent=“onSubmit”>form>

<a v-on:click.stop.prevent=“doThat”>a>

<form v-on:submit.prevent>form>

<div v-on:click.capture=“doThis”>…div>

<div v-on:click.self=“doThat”>…div>

<a v-on:click.once=“doThis”>a>

<div v-on:scroll.passive=“onScroll”>…div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

以上为事件修饰符，面试常问的，还有以下其它类型修饰符为扩展加分项，不必须回答！！！！！！！！！！

二、 v-model的修饰符

---

<1> .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="msg">

 
   
   
   
   

<2> .number
自动将用户的输入值转化为数值类型

<input v-model.number="msg">

 
   
   
   
   

<3> .trim
自动过滤用户输入的首尾空格

<input v-model.trim="msg">

 
   
   
   
   

三、键盘事件的修饰符

---

在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

<input v-on:keyup.13="submit">

 
   
   
   
   

对于一些常用键，还提供了按键别名：

<input @keyup.enter="submit">      

 
   
   
   
   

全部的按键别名：

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

.ctrl
.alt
.shift
.meta

<input @keyup.alt.67="clear">

<div @click.ctrl="doSomething">Do somethingdiv>

 
   
   
   
   

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

<input @keyup.alt.67="clear">

<input @keyup.alt=“other”>

<input @keydown.ctrl.13=“submit”>

四、element的修饰符 (面试回答加分)

---

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model=“form.name” placeholder=“昵称” @keyup.enter.native=“submit”>el-input>