Vue中常用修饰符

一、事件修饰符（v-on:  缩写@）

① .stop 阻止事件继续传播（阻止事件冒泡）与js中的event.stopPropagation()（阻止事件冒泡）效果一样。

② .prevent 阻止标签默认行为与js中的event.preventDefault()（阻止节点默认行为）

③ .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理，与冒泡事件的原理是相反的。

④ .self 只当在 event.target 是当前元素自身时触发处理函数，都能组织冒泡事件，不过值管自己不冒泡，不管你的内部的冒不冒泡。

⑤ .once 事件将只会触发一次，只有第一次点击才触发。

⑥ .passive 告诉浏览器你不想阻止事件的默认行为

⑦ .left 点击鼠标左键时触发

⑧ .right 点击鼠标右键时触发

⑨ .middle 点击鼠标中键时触发

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

其中一般①②⑤种方法使用的比较经常。

二、 v-model的修饰符（缩写：）

① .lazy 

默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。监听change而不是input事件( v-model 是每次修改都会绑定值，添加了 lazy 就只会在回车后或者失去焦点后绑定)。

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

② .number

自动将用户的输入值转化为数值类型，只能输入数值。

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

③ .trim

自动过滤用户输入的首尾空格

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

三、键盘事件的修饰符（@keyup）

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

通用按键修饰符列表

别名修饰符	键值修饰符	对应按键
按键修饰符
.enter	.13	回车
.tab	.9	制表
.delete	.46/.8	删除、退格
.esc	.27	退出
.space	.32	空格
.up	.38	上键
.down	.40	下键
.left	.37	左键
.right	.39	右键
鼠标修饰符
.left		点击左键
.right		点击右键
.middle		点击中间
组合修饰符
.ctrl		Ctrl键
.alt		Alt键
.shift		Shift键
.meta		meta键（WIN键）

// 按键事件
<input @keyup.enter="submit"> 

<input @keyup.13="submit"> 


// 鼠标事件
<input @click.left="submit"> 


// 组合修饰键
// 与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。
<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">

<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">



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

<input v-model="name" placeholder="姓名" @keyup.enter="change">

<el-input v-model="name" placeholder="姓名" @keyup.enter.native="change"></el-input>