【Vue.js 牛刀小試】：第六章 - 按鍵修飾符的使用

系列目錄地址

• 1、基礎知識概覽
  • 第一章 - 一些基礎概念（posted at 2018-10-31）
  • 第二章 - 常見的指令的使用（posted at 2018-11-01）
  • 第三章 - 事件修飾符的使用（posted at 2018-11-02）
  • 第四章 - 頁面元素樣式的設定（posted at 2018-11-05）
  • 第五章 - 計算屬性與監聽器（posted at 2018-11-08）
  • 第六章 - 按鍵修飾符的使用（posted at 2018-11-15）

前言

        上週末的時候，準備試試將 ASP.NET Core 的項目部署到 CentOS 服務器上，結果在一個接一個坑裏面跳，最後 Supervisor 守護程序仍是有問題，因而，採用重裝系統大招，結果，碰巧遇上 aspnetcore 的一個 bug（Missing package dotnet-runtime 2.1.6 for CentOS），嗯，最後 dotnet core 環境裝不上了，本來打算更新的 .NET Core 文章以及平常的 Vue 學習計劃也暫時擱淺了。

        在以前的 Vue 的學習中，咱們學習瞭如何使用事件修飾符去處理 DOM 事件，而在某些實際場景中，咱們也須要去設定各類按鍵事件去優化頁面的交互，本章，咱們來學習下在 Vue 中如何去監聽鍵盤事件。

        倉儲地址：Chapter01-Rookie Keyboard Modifiers

乾貨合集

        1、 按鍵修飾符

        在平常的頁面交互中，咱們常常會遇到這種需求：用戶輸入帳號密碼後點擊 Enter 鍵、一個多選篩選條件經過點擊多選框後自動加載符合選中條件的數據等等。在傳統的前端開發中，當咱們碰到這種相似的需求時，咱們每每須要知道 js 中須要監聽的按鍵所對應的 keyCode，而後經過判斷 keyCode 得知用戶是按下了那個按鍵，繼而執行後續的操做。例如，在下面的示例中，當咱們鬆開 Enter 按鍵後控制檯就會打印出姓名輸入框內的值。

<label>姓名：</label>
<input id="name" type="text">

$('#name').on('keyup',function(event){
    event.preventDefault();//阻止瀏覽器默認動做
    if(event.Code == 13){
    	console.log($(this).val());
    }
});
複製代碼

        而在 Vue 中，給咱們提供了一種便利的方式去實現監聽咱們的按鍵事件。在監聽鍵盤事件時，咱們常常須要查找常見的按鍵所對應的 keyCode，而 Vue 爲最經常使用的按鍵提供了別名。

.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right
複製代碼

        在下面的代碼中，咱們一樣監聽了 input 框的 Enter 事件，而咱們只須要在綁定的 input 標籤的 keyup 事件上添加 .enter 修飾符便可。

<div id="app">
    <label>姓名：</label>
    <input id="name" type="text" v-model:value="name" @keyup.enter="log">
</div>

<script> var vm = new Vue({ el: '#app', data: { name: '' }, methods: { log() { console.log(`name:${this.name}`); } } }) </script>
複製代碼

        固然，對於標準的104鍵盤，Vue 不可能幫咱們把全部的按鍵鍵值都定義好，這也不現實。因而，Vue 給咱們提供了一種經過定義全局 config.keyCodes 來自定義按鍵修飾符的別名的方式。例如，在上面的例子中，咱們是經過 Enter 按鍵獲取到輸入的文本框的值，如今，咱們的需求變了，須要咱們經過 F2 按鍵來得到文本框的值，這時咱們就能夠經過自定義按鍵修飾符來實現操做。

<div id="app">
    <label>姓名：</label>
    <input id="name" type="text" v-model:value="name" @keyup.prevent.f2="logF2">
</div>

<script> //經過 keyCode 自定義按鍵修飾符 Vue.config.keyCodes.f2 = 113 var vm = new Vue({ el: '#app', data: { name: '' }, methods: { logF2() { console.log(`name:${this.name} --- 經過 F2 按鍵得到`); } } }) </script>
複製代碼

         2、 系統修飾符

        在 Vue 的2.1.0版本中，開發者又爲咱們提供了系統修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器事件。

//鍵盤按鍵修飾符
.ctrl
.alt
.shift
.meta
//鼠標鍵盤修飾符
.left
.right
.middle
複製代碼

        在 Mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (⊞)。在 Sun 操做系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其餘特定鍵盤上，尤爲在 MIT 和 Lisp 機器的鍵盤、以及其後繼產品，好比 Knight 鍵盤、space-cadet 鍵盤，meta 被標記爲「META」。在 Symbolics 鍵盤上，meta 被標記爲「META」或者「Meta」。

        可能你會以爲，這和按鍵修飾符也沒什麼差異啊，都是按下按鍵而後執行操做啊，看了看官方文檔的解釋，em，好像更暈了。既然如此咱們來使用試試。

        在下面的案例中，咱們爲 input 輸入框綁定 ctrl 按鍵事件，咱們來看看與按鍵修飾符的使用有什麼區別。

<div id="app">
    <label>姓名：</label>
    <input id="name" type="text" v-model:value="name" @keyup.ctrl="log">
</div>

<script> var vm = new Vue({ el: '#app', data: { name: '' }, methods: { log() { console.log(`name:${this.name}`); } } }) </script>
複製代碼

        可能你在疑問，我在幹什麼，若是你本身嘗試就會發現，當咱們在狂點 ctrl 按鍵時，控制檯不會輸出任何信息，因此說，咱們自定義的方法其實並無執行。仔細看看，官方文檔中的示例，系統修飾符的使用示例中，都是綁定了兩個的修飾符，難道，系統修飾符必須和其它的按鍵修飾符一塊兒使用才能夠生效嗎？咱們來繼續嘗試。

        在下面的示例中，咱們將 ctrl 系統修飾符與 keyCode 爲67（C）的按鍵修飾符一塊兒使用看看。

<div id="app">
    <label>姓名：</label>
    <input id="name" type="text" v-model:value="name" @keyup.ctrl.67="log">
</div>

<script> var vm = new Vue({ el: '#app', data: { name: '' }, methods: { log() { console.log(`name:${this.name}`); } } }) </script>
複製代碼

        可能 gif 圖表達的不是很清楚，當我點擊 ctrl 按鍵時，沒有執行咱們的 log 方法，當我點擊 c 按鍵時也並無執行咱們的自定義方法，但是當我按下 ctrl 按鍵時，又點擊 c 按鍵時（這裏的操做等同於你在編輯文檔時使用 ctrl+c 組合按鍵），卻執行了咱們自定義的 log 方法。經過屢次嘗試，能夠發現當咱們寫以下代碼的時候,咱們會發現若是僅僅使用系統修飾鍵是沒法觸發 keyup 事件的。

<div id="app">
    <label>姓名：</label>
    <input id="name" type="text" v-model:value="name" @keyup.ctrl="log">
</div>
複製代碼

        仍是以前的代碼，在測試的過程當中，不知你是否發現，當咱們綁定一個 ctrl 系統修飾符時，當咱們同時使用多個系統修飾符也會觸發咱們的自定義事件，這確定與咱們所須要的不一樣。因而 Vue 在2.5.0版本中新增了 .exact 修飾符容許咱們控制由精確的系統修飾符組合觸發的事件。例如在下面的代碼中，咱們限制只能使用 ctrl+按鍵修飾符，卻不能使用多個系統修飾符+按鍵修飾符一塊兒使用。你能夠親身嘗試下，你會發現，當咱們使用 ctrl+c、ctrl+s 時會觸發咱們的自定義 log 事件，但是當你使用 ctrl+alt+c 時就不會觸發咱們的自定義 log 事件。

<div id="app">
    <label>姓名：</label>
    <input id="name" type="text" v-model:value="name" @keyup.ctrl.exact="log">
</div>
複製代碼

        相似的在 Vue 的2.2.0版本中，開發者又爲咱們提供了鼠標按鈕修飾符去觸發鼠標事件監聽器。例以下面的代碼所示，當咱們鼠標右鍵點擊咱們的按鈕時纔會觸發咱們的自定義 log 事件。

<div id="app">
	<input id="name" type="text" v-model:value="name">
	<button @click.right="log">log</button>
</div>
複製代碼

總結

        一、對於 keyup 事件，按鍵修飾符能夠直接使用，而系統修飾符則是以一種組合按鍵的形式使用。

        二、咱們能夠經過全局 config.keyCodes 對象自定義按鍵修飾符別名，也能夠直接使用 keyCode 爲按鍵設定按鍵修飾符。

參考

        一、vue修飾符--多是東半球最詳細的文檔（滑稽）

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712