第5章事件處理與表單綁定5.1 事件處理5.2 表單輸入綁定5.3 實訓：新增商品頁面掌握Vue中事件處理的技巧掌握多個表單控件的雙向數(shù)據(jù)綁定方法引言本章重點學習如何使用Vue的基本語法?；菊Z法是一個框架的基礎，而正確使用基本語法則是學習Vue的重中之重。Vue基本語法包括創(chuàng)建應用程序?qū)嵗⒉逯嫡Z法、指令、計算屬性、偵聽器、Class與Style綁定、生命周期鉤子等。插值語法用于實現(xiàn)頁面的數(shù)據(jù)綁定，指令則是Vue為HTML標簽新增的一些屬性，每一個指令都可實現(xiàn)一個強大的功能。計算屬性主要用于處理插值并返回一個新數(shù)據(jù)，偵聽器主要用于觀察和響應Vue組件實例上的數(shù)據(jù)變動。Class與Style綁定用于操縱元素的CSS樣式和內(nèi)聯(lián)樣式，生命周期則是每一個Vue組件實例從創(chuàng)建到銷毀的過程。5.1事件處理方法事件處理器內(nèi)聯(lián)事件處理器事件修飾符按鍵修飾符其他修飾符實驗：賬戶信息管理頁面Vue借助v-on指令監(jiān)聽DOM事件，當事件被觸發(fā)時執(zhí)行相應的表達式，事件處理器中的表達式可以是methods選項中定義的方法名，也可以是一段JavaScript代碼，還可以是一個方法調(diào)用語句。其中，第一種寫法被稱為方法事件處理器，后兩種寫法被稱為內(nèi)聯(lián)事件處理器。5.1事件處理5.1事件處理1.方法事件處理器的語法格式方法事件處理器的語法格式如下<buttonv-on:click="方法名">文本</button><button@click="方法名">文本</button>上述語法格式中，mount()方法接收一個“容器”參數(shù)，此“容器”參數(shù)可以是一個實際的DOM元素。將應用程序的根組件掛載到DOM元素上后，Vue會監(jiān)控DOM元素內(nèi)的所有數(shù)據(jù)變化，從而實現(xiàn)數(shù)據(jù)的雙向綁定。5.1.1方法事件處理器5.1事件處理2.方法事件處理器示例在方法事件處理器中執(zhí)行一個methods選項中定義的方法，達到控制商品價格增加與減少的效果methods:{add(){this.price++;},reduce(){this.price--;}}

5.1.1方法事件處理器具體代碼見源碼包/ch05/methodEventProcessor.html文件例5-15.1事件處理1.內(nèi)聯(lián)事件處理器處理簡單事件的語法格式當事件處理的邏輯較為簡單時，可直接將JavaScript代碼寫在v-on指令的表達式中，通過內(nèi)聯(lián)事件處理器直接執(zhí)行內(nèi)聯(lián)的JavaScript代碼。內(nèi)聯(lián)事件處理器處理簡單事件的語法格式<buttonv-on:click="JavaScript代碼">文本</button><button@click="JavaScript代碼">文本</button>5.1.2內(nèi)聯(lián)事件處理器5.1事件處理2.內(nèi)聯(lián)事件處理器處理簡單事件示例在方法事件處理器中執(zhí)行一個methods選項中定義的方法，達到控制商品價格增加與減少的效果<button@click="price++">增加1元</button><button@click="price--">減少1元</button>

5.1.2內(nèi)聯(lián)事件處理器具體代碼見源碼包/ch05/handleSimpleEvents.html文件例5-25.1事件處理3.內(nèi)聯(lián)事件處理器調(diào)用方法除借助方法事件處理器直接綁定方法名外，還可在內(nèi)聯(lián)事件處理器中調(diào)用方法，并向該方法中傳入?yún)?shù)<buttonv-on:click="方法名(參數(shù))">文本</button><button@click="方法名(參數(shù))">文本</button>5.1.2內(nèi)聯(lián)事件處理器5.1事件處理4.內(nèi)聯(lián)事件處理器訪問事件參數(shù)在方法事件處理器中執(zhí)行一個methods選項中定義的方法，達到控制商品價格增加與減少的效果

<button@click="sayHello('greeting',$event)">訪問事件參數(shù)</button>

5.1.2內(nèi)聯(lián)事件處理器具體代碼見源碼包/ch05/accessingEventParameters.html文件例5-3methods:{sayHello(msg,event){this.message=msg;console.log(event);}}5.1事件處理4.內(nèi)聯(lián)事件處理器訪問事件參數(shù)瀏覽器中運行例5-3代碼，顯示效果如下左圖，單擊“訪問事件參數(shù)”按鈕，查看event變量的結(jié)構(gòu)內(nèi)容，如右圖

5.1.2內(nèi)聯(lián)事件處理器具體代碼見源碼包/ch05/accessingEventParameters.html文件例5-35.1事件處理在原生JavaScript中處理事件時，經(jīng)常調(diào)用event.preventDefault()方法阻止事件的默認行為，調(diào)用event.stopPropagation()方法阻止事件冒泡。在Vue中，讀者既可以直接在methods選項所包含的方法中調(diào)用上述原生方法，也可以借助事件修飾符對事件進行限制，實現(xiàn)同等效果。5.1.3事件修飾符5.1事件處理1.事件修飾符的語法格式修飾符是由圓點·開頭的指令后綴表示的，修飾符需要緊跟在事件名稱后。修飾符的語法格式如下v-on:事件.修飾符="表達式"5.1.3事件修飾符5.1事件處理2.針對v-on指令的事件修飾符針對v-on指令，Vue提供了多種事件修飾符，具體說明5.1.3事件修飾符修飾符說明.stop效果等同于JavaScript中的event.stopPropagation()方法，可阻止事件的冒泡行為。當單擊內(nèi)部元素后，將不再觸發(fā)父元素的單擊事件.prevent效果等同于JavaScript中的event.preventDefault()方法，可阻止事件的默認行為。如<a>標簽添加.prevent修飾符，單擊<a>標簽將不會跳轉(zhuǎn)至對應的鏈接.capture將頁面元素的事件流改為事件捕獲模式，事件捕獲順序由外到內(nèi)，與事件冒泡的方向相反.self可理解為跳過事件冒泡和事件捕獲，只有作用在該元素上的事件才可執(zhí)行.once只會觸發(fā)一次事件處理函數(shù)，可用于實現(xiàn)僅需觸發(fā)一次的操作。與其他修飾符不同，.once修飾符不僅對原生的DOM事件起作用，還可被用于自定義的組件事件上.passive通知瀏覽器不阻止事件的默認行為。需要注意的是，.passive修飾符不可與.prevent修飾符連用，連用時會觸發(fā)瀏覽器警告5.1事件處理3.修飾符示例以.capture修飾符為例演示如何在事件處理中使用事件修飾符，，創(chuàng)建3個div元素并使其逐層嵌套，為每個div元素添加單擊事件，查看事件觸發(fā)的順序5.1.3事件修飾符例5-4具體代碼見源碼包/ch05/accessingEventParameters.html文件methods:{outside(){console.log("Box1");},center(){console.log("Box2");},inside(){console.log("Box3");}}5.1事件處理3.修飾符示例未給div元素的click事件添加.capture修飾符，則該頁面的事件流默認會在冒泡階段處理事件。單擊文本內(nèi)容為Box3的div元素時，將從內(nèi)向外觸發(fā)div元素，元素的觸發(fā)順序為Box3、Box2、Box15.1.3事件修飾符例5-4具體代碼見源碼包/ch05/accessingEventParameters.html文件5.1事件處理3.修飾符示例為click事件添加.capture修飾符，該頁面的事件流默認會在捕獲階段處理事件。在瀏覽器中運行上述代碼，當單擊文本內(nèi)容為Box3的div元素時，將從外向內(nèi)觸發(fā)含有.capture修飾符的div元素，元素的觸發(fā)順序為Box1、Box2、Box35.1.3事件修飾符例5-4具體代碼見源碼包/ch05/accessingEventParameters.html文件5.1事件處理按鍵修飾符為鍵盤事件服務，Vue中常用的鍵盤事件有3種，包括keydown、keyup、keypress，具體說明如表5.1.4按鍵修飾符鍵盤事件說明keydown鍵盤按鍵按下時觸發(fā)事件keyup鍵盤按鍵抬起時觸發(fā)事件keypress鍵盤按鍵按下抬起的間隔期間觸發(fā)事件5.1事件處理在監(jiān)聽鍵盤事件時，如需判斷按鍵的keyCode獲悉用戶按下的具體按鍵，進而執(zhí)行后續(xù)操作。Vue提供了一種更為便利的方式來監(jiān)聽鍵盤事件，具體說明如表修飾符keyCode編碼說明.enter13在按下Enter鍵時，觸發(fā)事件.tab9在按下Tab鍵時，觸發(fā)事件.delete46在按下Delete鍵時，觸發(fā)事件.esc27在按下Esc鍵時，觸發(fā)事件.space8在按下Space鍵時，觸發(fā)事件.up38在按下向上的箭頭鍵時，觸發(fā)事件.down37在按下向下的箭頭鍵時，觸發(fā)事件.left39在按下向左的箭頭鍵時，觸發(fā)事件.right40在按下向右的箭頭鍵時，觸發(fā)事件5.1.4按鍵修飾符5.1事件處理以.enter修飾符為例演示如何在鍵盤事件中使用按鍵修飾符。創(chuàng)建一個input元素并為該元素綁定鍵盤事件，查看事件的觸發(fā)結(jié)果，具體代碼具體代碼見源碼包/ch05/enterOfEventModifiers.html文件用戶名稱：<inputv-on:keypress="editName"type="text"name="name"id="name"><br>聯(lián)系方式：<inputv-on:keypress.enter="editTel"type="number"name="tel"id="tel">methods:{editName(){console.log("正在修改用戶名稱");},editTel(){console.log("正在修改用戶聯(lián)系方式");}}例5-55.1.4按鍵修飾符5.1事件處理在瀏覽器中運行上述代碼，按下F12鍵打開控制臺，切換至Console選項。在未給keypress事件添加按鍵修飾符的前提下，向用戶名稱輸入框中輸入xiaoming，keypress事件會被連續(xù)觸發(fā)8次，editName()方法會被連續(xù)調(diào)用8次，顯示效果如圖例5-55.1.4按鍵修飾符5.1事件處理在為keypress事件添加.enter修飾符的前提下，向聯(lián)系方式輸入框中輸入123456并按下回車鍵，keypress事件僅觸發(fā)1次，editTel()方法僅調(diào)用1次，顯示效果如圖例5-55.1.4按鍵修飾符5.1事件處理1.系統(tǒng)修飾符系統(tǒng)修飾符規(guī)定僅在按下相應按鍵時，才觸發(fā)對應的鼠標事件或鍵盤事件，系統(tǒng)修飾符的具體說明如表系統(tǒng)修飾符與常規(guī)修飾符不同，在與keyup事件一起使用時，需保證系統(tǒng)修飾符處于按下狀態(tài)，其他修飾符處于釋放狀態(tài)，才可觸發(fā)對應事件5.1.5其他修飾符修飾符說明.ctrlCtrl鍵.altAlt鍵.shiftShift鍵.meta在Mac鍵盤上，meta是Command鍵，在Windows鍵盤上，meta鍵是Windows鍵5.1事件處理2..exact修飾符.exact修飾符用于精準控制觸發(fā)一個事件的所需的系統(tǒng)修飾符。基于click事件演示.exact修飾符的使用，具體代碼5.1.5其他修飾符//僅當按下Ctrl鍵且未按任何其他鍵時才會觸發(fā)<button@click.ctrl.exact="onClick">文本</button>//僅當沒有按下任何系統(tǒng)按鍵時觸發(fā)<button@click.exact="onClick">文本</button>5.1事件處理3.鼠標按鍵修飾符鼠標按鈕修飾符規(guī)定僅在按下特定鼠標按鍵時才觸發(fā)對應事件。在Vue中，鼠標按鍵修飾符主要有3個，即.left、.middle和.right，這3者分別對應鼠標的左鍵、中鍵和右鍵。以.right修飾符為例演示鼠標按鍵修飾符的使用，具體代碼5.1.5其他修飾符//僅在按下鼠標右鍵時，才觸發(fā)事件處理函數(shù)<button@click.right="onClick">文本</button>1.實驗描述本案例是1個賬戶信息管理頁面，其具體實現(xiàn)依賴于Vue的內(nèi)置指令、計算屬性、方法事件處理器、事件修飾符與按鍵修飾符等。5.1事件處理5.1.6實驗：賬戶信息管理頁面2.代碼實現(xiàn)-具體代碼見【例5-6】

（1）新建一個HTML文件，以CDN的方式在該文件中引入Vue文件。（2）data()函數(shù)中定義1個userFlag變量，在methods選項中定義1個editUser()方法。使用editUser()方法控制userFlag變量的真假，進而控制賬戶信息的顯示、標簽與編輯文本框的交叉顯示。（3）在methods選項中定義1個overUser()方法，在用戶完成賬戶信息修改并按下回車按鍵時觸發(fā)該事件。5.1事件處理5.1.6實驗：賬戶信息管理頁面例5-63.實驗總結(jié)

需要為form表單的submit事件添加.prevent修飾符，阻止form表單的默認提交行為。為賬號顯示標簽<span>的click事件添加.once修飾符，限制賬號修改事件出發(fā)次數(shù)，使其僅可觸發(fā)一次。定義一個isDisabled變量，handleDisabled()方法。通過handleDisabled()方法控制isDisabled變量的真假，進而控制提交按鈕的禁用與啟用。定義一個passwordFilter計算屬性，用于對用戶密碼進行加密顯示，即將部分密碼字符串替換為星號（*）5.1事件處理5.1.6實驗：賬戶信息管理頁面5.2表單輸入綁定單行文本輸入框多行文本輸入框復選框單選按鈕選擇框值綁定實驗：用戶注冊頁面v-model指令實現(xiàn)了表單控件的雙向數(shù)據(jù)綁定，既可通過input元素修改綁定的數(shù)據(jù)對象，也可通過組件實例修改綁定的數(shù)據(jù)對象5.2表單輸入綁定5.2表單輸入綁定1.單行文本輸入框的語法格式單行文本輸入框的語法格式如下5.2.1單行文本輸入框<p>文本內(nèi)容{{message}}</p><inputv-model="message"/>5.2表單輸入綁定2.單行文本輸入框示例為input元素的value屬性設置初始值Hello，并使用v-model指令為input元素綁定一個表達式message，對應data()中的數(shù)據(jù)message，具體代碼和瀏覽器運行效果如下5.2.1單行文本輸入框<inputtype="text"value="Hello"v-model="message"><script>constvm=Vue.createApp({data(){return{message:'歡迎進入系統(tǒng)'}}}).mount('#app')</script>例5-7具體代碼如源碼包/ch05/singleLineTextInputBox.html所示5.2表單輸入綁定2.單行文本輸入框示例在運行效果頁面中，輸入框中顯示的是message的值，而非input元素的value值。該現(xiàn)象是由于v-model指令忽略所有表單控件上初始的value、checked、selected值造成的，它始終將當前組件實例的數(shù)據(jù)屬性視為數(shù)據(jù)的正確來源。如右下圖在輸入框中輸入“歡迎進入后臺管理系統(tǒng)”，輸入框下方顯示的message值也會發(fā)生改變，此時單行文本輸入框頁面，如右下圖5.2.1單行文本輸入框例5-75.2表單輸入綁定1.多行文本輸入框的語法格式單行文本輸入框的語法格式如下需要注意的是，在<textarea></texarea>標簽組中是不支持插值語法的，錯誤語法如下5.2.2多行文本輸入框<p>文本內(nèi)容{{message}}</p><textareav-model="message"></textarea><textarea>{{message}}</textarea>5.2表單輸入綁定2.多行文本輸入框示例使用v-model指令為textarea元素綁定一個表達式message，對應data()中的數(shù)據(jù)message，具體代碼與運行效果圖5.2.2多行文本輸入框<textareav-model="message"></textarea><p>{{message}}</p><script>constvm=Vue.createApp({data(){return{message:'疾風知勁草，板蕩識誠臣'}}}).mount('#app')</script>例5-8具體代碼如源碼包/ch05/textArea.html所示5.2表單輸入綁定1.單一復選框的語法格式單一復選框的綁定值為布爾類型，復選框被選中綁定值為true，復選框未被選中綁定值為false。單一復選框的語法格式如下所示5.2.3復選框<inputv-model="checked"type="checkbox"/>data(){return{checked:false}}5.2表單輸入綁定2.多個復選框的語法格式當多個復選框組合在一起使用時，可將多個復選框綁定到同一個數(shù)組中，該數(shù)組始終包含所有當前被選中的復選框的值。多個復選框的語法格式如下5.2.3復選框<inputtype="checkbox"id="first"value="靜態(tài)文本"v-model="checkedNames"><inputtype="checkbox"id="second"value="靜態(tài)文本"v-model="checkedNames"><inputtype="checkbox"id="third"value="靜態(tài)文本"v-model="checkedNames">data(){return{checkedNames:[]}}5.2表單輸入綁定2.復選框示例定義一個布爾類型的數(shù)據(jù)flag，定義一個數(shù)組類型的數(shù)據(jù)checkedList，分別保存單一復選框當前狀態(tài)和多個復選框的選中值，具體代碼5.2.3復選框<p>flag:{{flag}}</p>具體代碼見源碼包/ch05/radish.html文件例5-9<p>checkedList:{{checkedList}}</p>5.2表單輸入綁定2.復選框示例在瀏覽器中運行上述代碼，單一復選框處于選中狀態(tài)，flag的值為true。多個復選框處于未選中狀態(tài)，checkedList數(shù)組為空，結(jié)果如右上圖取消單一復選框的選中狀態(tài)，flag值變?yōu)閒alse。選中多個復選框中的“冰淇淋蘿卜”和“西瓜蘿卜”選項，被選中的復選框的value值保存在checkedList數(shù)組，結(jié)果如右下圖5.2.3復選框例5-95.2表單輸入綁定1.單選按鈕的語法格式單選按鈕的語法格式如下所示5.2.4單選按鈕<inputv-model="singleChoice"type="radio"value="靜態(tài)文本"/>data(){return{singleChoice:''}}單選按鈕與復選框類似，都有多個可供選擇的選項，區(qū)別在于單選按鈕的多個選項之間存在互斥效果?？梢允褂胿-model指令搭配單選按鈕的value屬性實現(xiàn)其互斥效果。5.2表單輸入綁定2.單選按鈕示例定義一個字符串類型的數(shù)據(jù)select，select用于保存被選中的單選按鈕的vaule值，具體代碼和運行效果5.2.4單選按鈕<p>select:{{select}}</p>例5-10具體代碼見源碼包/ch05/radioButton.html文件5.2表單輸入綁定1.單選選擇框的語法格式單選選擇框的語法格式如下所示5.2.5選擇框<p>select:{{select}}</p><selectv-model="selected"><optiondisabledvalue="">請選擇</option><option>first</option><option>second</option><option>third</option></select>data(){return{selected:''}}如果v-model指令的表達式的初始值不未匹配任何一個選擇項，<select>標簽會渲染成一個“未選擇”的狀態(tài)，建議提供一個空值的禁用選擇項，避免iOS系統(tǒng)無法觸發(fā)select標簽的change事件。5.2表單輸入綁定2.多選選擇框的語法格式為select標簽添加multiple屬性可實現(xiàn)選擇框的多選效果，多選選擇框可將多個選擇項的值綁定到同一個數(shù)組中。多選選擇框的語法格式如下所示5.2.5選擇框<selectv-model="selectedList"multiple><optiondisabledvalue="">first</option><option>second</option></select>data(){return{selectedList:[]}}5.2表單輸入綁定3.選擇框示例定義一個字符串類型的數(shù)據(jù)selected，用于保存單選選擇框的選中值。定義一個數(shù)組類型的數(shù)據(jù)selectedList，保存多選選擇框的所有選中值，具體代碼和面顯示效果如圖5.2.5選擇框<p>selected:{{selected}}</p>例5-11<p>selectedList:{{selectedList}}</p>具體代碼見源碼包/ch05/agriculturalProducts.html文件5.2表單輸入綁定1.單一復選框（1）值綁定的單一復選框的語法格式5.2.6值綁定<inputtype="checkbox"v-model="isSure"true-value="yes"false-value="no"/>對于Vue的單一復選框，可在input元素中使用true-value屬性和false-value屬性，設置單一復選框在選中與未選中狀態(tài)下v-model指令綁定的具體值5.2表單輸入綁定1.單一復選框（2）值綁定的單一復選框示例使用v-bind指令實現(xiàn)單一復選框的值綁定。在data()函數(shù)中定義2個字符串類型的數(shù)據(jù)屬性，用于保存單一復選框在選中與未選中狀態(tài)下的值5.2.6值綁定<inputtype="checkbox"v-model="isSave":true-value="saved":false-value="unSaved"id="informationStorage"><p>isSave:{{isSave}}</p>具體代碼見源碼包/ch05/rememberAccountPassword.html文件例5-125.2表單輸入綁定1.單一復選框（2）值綁定的單一復選框示例在瀏覽器中運行上述代碼，數(shù)據(jù)屬性isSave的初始值為“空”，當選中復選框時，isSave的值為true-value屬性綁定的saved的值“記住”，顯示效果如右上圖取消復選框的選中狀態(tài)，isSave的值為false-value屬性綁定的unSaved的值“未記住”，顯示效果如右下圖5.2.6值綁定5.2表單輸入綁定2.單選按鈕（1）值綁定的單選按鈕的語法格式5.2.6值綁定<inputtype="radio"v-model="pick":value="first"/><inputtype="radio"v-model="pick":value="second"/>data(){return{pick:'',first:'first',second:'second'}}Vue的單選按鈕被選中時，v-model指令綁定的數(shù)據(jù)屬性的值默認顯示為對應單選按鈕的value值。在值綁定中，可使用v-bind指令將單選按鈕的value屬性綁定到data函數(shù)定義的數(shù)據(jù)屬性中。5.2表單輸入綁定2.單選按鈕（2）值綁定的單選按鈕示例使用v-bind指令實現(xiàn)單選按鈕的值綁定。在data函數(shù)中定義一個數(shù)組類型的數(shù)據(jù)屬性，用于保存每一個單選按鈕在選中狀態(tài)下的value值，具體代碼5.2.6值綁定<inputtype="radio"id="boy"v-model="isChecked":value="checkedVal[0]"><labelfor="boy">男</label><inputtype="radio"id="girl"v-model="isChecked":value="checkedVal[1]"><labelfor="girl">女</label>例5-13具體代碼見源碼包/ch05/sexSelection.html文件<p>isChecked:{{isChecked}}</p>5.2表單輸入綁定2.單選按鈕（2）值綁定的單選按鈕示例在瀏覽器中運行上述代碼，數(shù)據(jù)屬性isChecked的初始值為“空”，當選中“男”按鈕時，isChecked的值為value屬性綁定的checkedVal[0]的值“男生”，顯示效果如右上圖當選中“女”按鈕時，isChecked的值為value屬性綁定的checkedVal[1]的值“女生”，顯示效果如右下圖5.2.6值綁定例5-135.2表單輸入綁定3.選擇框（1）值綁定的選擇框的語法格式5.2.6值綁定<inputtype="radio"v-mo<selectv-model="isSelected"><option:value="first">{{first}}</option></select>data(){return{isSelected:'',first:'first'}}del="pick":value="first"/><inputtype="radio"v-model="pick":value="second"/>data(){return{pick:'',first:'first',second:'second'}}以單選選擇框為例，當選中選擇框的選擇項后，v-model指令綁定的select標簽的值是選擇項的值（option標簽的value值或文本）?？墒褂胿-bind指令將選擇項的value值綁定到data函數(shù)定義的數(shù)據(jù)屬性中。5.2表單輸入綁定3.選擇框（1）值綁定的選擇框示例以單選選擇框為例，使用v-bind指令實現(xiàn)單選選擇框的值綁定。在data函數(shù)中定義一個數(shù)組類型的數(shù)據(jù)屬性，并使用v-for指令遍歷該數(shù)組，使每一個選擇項的value值與對應數(shù)組元素綁定起來，具體代碼5.2.6值綁定<selectv-model="isSelected"><optionvalue=""disabled>選擇一種蔬菜</option><optionv-for="iteminoptions":value="item">{{item}}</option></select>例5-14<p>isSelect