[笔记][Vue.js]打开Vue.js世界的大门(10)-事件绑定的后缀修饰符Part2篇

Hello！大家好！Part1篇在这里，今天让我们继续事件修饰符的Part2篇(简单迅速切入正文，因为时间有点晚了XD)！

---

首先登板的是.once！

1. .once

这个后缀词会让事件只在第一次被触发的时候执行，可以先看以下简单的範例：
HTML

<div id="ex1Vue">    <div id="outSide" :style="outSideClass" @click="clickOut">        <!--在绑定的事件后面添加.once-->        <input type="button" @click.once="clickMe" value="点我" >    </div></div>

JavaScript

//资料let ex1Data = {    outSideClass:{        height:'50px',        width:'100px',        backgroundColor:'red'    },}//方法let ex1Method = {    clickOut:()=>{        console.log('外面')    },    clickMe:()=>{        console.log('按钮')    }}let ex1Vue = new Vue({    el:'#ex1Vue',    data:ex1Data,    methods:ex1Method,})

把.once下在按钮的事件上，他执行过一次后不管怎么点都不会再执行事件了。

2. .passive

这个修饰符和.prevent的作用相反，一个会取消DOM的预设功能也就是preventDefault()，而.passive是死也不会让preventDefault()执行，如果在有.passive的情况下使用.prevent或preventDefault()那浏览器会出现警告哦！而且也会直接忽略.prevent，另外.passive可以大大的提升在手机上使用的效能，主要用在捲轴的onscroll事件上，避免滑动的时候卡卡的。

好的，让这边出现一条分隔线！

---

分隔线下面是叫做「按键修饰符」，意思是我们在使用onkeyup在监听DOM的时候，可透过设定的键盘按键触发事件。

按键修饰符

因为所有的键盘按键实在是太多了，所以Vue.js只预设几个比较常用的按键别名，当然那些不常用的也可以另外用Vue.js的全域属性keyCode做设定，我们先来看看现成的按键修饰符吧！

.enter.tab.delete 这个修饰符也包含了退格键。.esc.space.up 这边和下面是方向键的上下左右，但是并不包含WASD，哈哈。.down.left.right

用法如下：
HTML

<div id="ex1Vue">    <h4>输入完后按Enter会在console中印出输入内容</h4>    <!--这里用双向绑定message的值，        并在onkeyup事件中用.enter修饰词，代表按下Enter后触发-->    <input id="clickMe" @keyup.enter="clickEnter" v-model="message" /></div>

JavaScript

//资料let ex1Data = {    message:'',}//方法let ex1Method = {    clickEnter:()=>{        console.log(ex1Data.message)    }}let ex1Vue = new Vue({    el:'#ex1Vue',    data:ex1Data,    methods:ex1Method,})

就如上图所示，只有在点击特定的键盘按键后才会输入，不然一般的onkeyup只要放开键盘上的任一按键都会执行事件，所以这个修饰词可以用来缩小他的範围。

「可是这样只能设定一个按键而已耶！」如果你正这么想的话，欸嘿嘿！上一篇Part1有提到修饰词是可以连着用的，所以把HTML改成下方这样子：
HTML

<div id="ex1Vue">    <h4>输入完后按Enter或空白键会在console中印出输入内容</h4>    <input id="clickMe" @keyup.enter.space="clickEnter" v-model="message" /></div>

这边稍微PS一下，上方的HTML同时使用了.enter和.space两种修饰词，单用.enter可能看不出来，但是加上了.space就会发现，输入的过程虽然会触发事件，但也不会阻止在input上的输入，所以他既会触发事件也会输入按键内容，如下图，使用空白去触发事件：

那在自行指定按键修饰符之前，需要先知道说键盘的按键各是对应到哪个keycode，可以从这里去知道，假设我要设定Q当我的keyword，而他的keycode是81，就可以这样设定：
HTML

<div id="ex1Vue">    <h4>输入完后按Q会在console中印出输入内容</h4>    <!--设定在JavaScript设定的Q-->    <input id="clickMe" @keyup.Q="clickEnter" v-model="message" />        <!--也可以不命名，直接指定81        这个情况就不需要再添加JavaScript了-->    <!--<input id="clickMe" @keyup.81="clickEnter" v-model="message" />--></div>

JavaScript

//替Vue的config属性keycodey增加一个Q，并指定刚刚的keycode 81Vue.config.keyCodes.Q = 81//资料let ex1Data = {    message:'',}//方法let ex1Method = {    clickEnter:()=>{        console.log(ex1Data.message)    }}let ex1Vue = new Vue({    el:'#ex1Vue',    data:ex1Data,    methods:ex1Method,})

如此Q也能成为触发事件的keyword了！

另外Vue.js也有支援KeyboardEvent.key这是JavaScript对各种系统整合的keycode(详情看这里)，里面有很多现成的属性值也可以直接当成修饰词用，但他必须要处理成另一种命名规格，例如「代表方向键下的ArrowDown要改成arrow-down」这叫做短横线命名法，和之前驼峰命名法不一样哦！我们用KeyboardEvent.key当修饰修改一下HTML：
HTML

<div id="ex1Vue">    <h4>输入完后按「下」会在console中印出输入内容</h4>    <!--把ArrowDown转换成短横线命名后设定为`keyword`-->    <input id="clickMe" @keyup.arrow-down="clickEnter" v-model="message" /></div>

这个结果我就不再贴图了XD，就是按「下」时会触发按键！

系统修饰符

这个系统修饰符没有听起来那么厉害，但是使用起来还是很酷，是指说必须要在按下设定的系统修饰符按键的状态下，再点击按键修饰符才会触发事件。直接看例子吧！Check it out！

哦！等等，还是先介绍一下有哪些系统修饰符XD

.ctrl.alt.shift.meta 这个.meta在MAC上对应到command键、windows对应到win键、还有有些笔电的键盘中间会有小红点控制滑鼠，那个也可以。

使用方法和一般的修饰符一样，看範例前让我在PS一下XD，因为接下来都是修改在HTML的部分，所以JavaScript和上面一样就不在另外打了，结果也是哦！因为就只是一堆console的讯息XD，有兴趣可以直接複製HTML到codepen中执行看看，那以下範例：
HTML

<div id="ex1Vue">    <h4>输入完后同时按下ctrl和Enter会在console中印出输入内容</h4>    <input id="clickMe" @keyup.ctrl.enter="clickEnter" v-model="message" /></div>

可是这时候会想，虽然我指定了ctrl及enter按下后才会执行，但是我如果再加码同时按下shift、tab或delete(到底有几只手指XD)，只要按下的键有包含ctrl和enter他就是会触发事件，那有没有方法可以精準的控制住只有按下ctrl和enter的状况下才执行呢？

有的！让我们欢迎...

.exact

只要有他在，任何多余的按键按下了都别想触发事件！使用方法看以下例子：
HTML

<div id="ex1Vue">    <h4>输入完后只有按下ctrl和Enter两个键的情况才会在console中印出输入内容</h4>    <input id="clickMe" @keyup.exact.ctrl.enter="clickEnter" v-model="message" /></div>

最后再介绍三个修饰符，因为有键盘就会有滑鼠，所以滑鼠也想要参一脚，让我们看看滑鼠的修饰符：

.left 左键.right 对的。不是啦！是右键XD.middle 滚轮的键

一样写下简单的使用方法，因为使用滑鼠去触发事件，一定和点击有关，所以我把上面的@keyup改成@click，并把滑鼠的修饰符加上去：
HTML

<div id="ex1Vue">    <h4>输入完后只有在按下shift和滑鼠右键的情况才会在console中印出输入内容</h4>    <!--把onkeyup改成onclick-->    <input id="clickMe" @click.exact.shift.right="clickEnter" v-model="message" /></div>

这边是最后的PS，有些人或许会想说，键盘上有.left和.right，最后介绍滑鼠也有这两个，那他们不会卡在一起吗？其实不用担心啦！因为键盘和滑鼠触发的事件本身就不同，像是最后改的onclick一定是使用滑鼠点击去触发，光是按下方向键的左或右是没有用的，而反过来的oninput或上面使用的onkeyup也是一样的道理！

召唤分隔线！

---

越过这条线后总算轻鬆一点了XD，关于事件的修饰符在Part2中告一段落，之后如果有看到会再分享，没意外的话，下一篇会进入到component组件的部分，希望我能够驾驭住他，哈哈！

最后感谢大大们的观看！如果文章中有讲解不清楚或是小弟观念不正确的地方，还麻烦各位大大留言告诉我，谢谢大家