Vue基礎入門，第11節 鼠標事件與鍵盤事件，事件修飾符的使用
-on的作用是為元素綁定監聽事件
標準寫法是：v-on:事件名="函數名"，
也可以簡寫成：@事件名='函數名'。
v-on綁定的事件觸發后，methods對應的函數將觸發。
不僅可以綁定鼠標事件，也可以綁定鍵盤事件
獲取按鍵的內容
v-on:事件名后可以跟修飾符
常用的修飾符有
1、once：僅執行1次。
2、prevent：禁止默認行為
3、stop：在嵌套過程中，當多個元素響應同一個事件，防止發生冒泡。
4、self：避免自身受其他元素事件影響。
5、capture：添加事件偵聽器。
舉2個例子：
以上示例源碼
家好，今天給大家介紹一款，JavaScript+css實現的鼠標懸停卡片翻轉html源碼（圖1）。送給大家哦，獲取方式在本文末尾。
鼠標經過的時候，相應的圖片會發生翻轉（圖2）
帶按鈕動畫（圖3）
源碼完整，需要的朋友可以下載學習（圖4）
本源碼編碼：10184，需要的朋友，訪問[92ui點net]，搜索10184，即可獲取。
TML面試題總結
1. 對 HTML 語義化的理解
- 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構；
- 代碼結構清晰，方便團隊的管理和維護，并且語義化更具有可讀性，減少差異化；
- 提升用戶體驗； 例如：title、alt用于解釋名詞或者圖片信息、label標簽的活用
- 有利于SEO優化，提升搜索引擎排名； 和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息； 爬蟲依賴于標簽來確上下文和關鍵字的權重；
- 方便其他設備的解析（屏幕閱讀器、盲人閱讀器、移動設備等等）；
2. H5新增特性
- 語義化更好的標簽： header、nav、aside、article、section、footer；
- 音視頻標簽： audio、video； 如果瀏覽器不支持自動播放怎么辦? 在屬性中添加autoplay(谷歌瀏覽器不支持音頻自動播放，但是視頻支持靜音自動播放)；
- 以 data- 開頭的自定義屬性；
- 本地存儲： localStorage、sessionStorage；
- 表單控件； 給 type 屬性設置值； url、search、file、email、date、number、month、color、tel；
- 畫布； Canvas；
- 拖拽釋放： drag、drop；
- 新技術： 瀏覽器多線程：webWorker； 前后臺持久化通信技術：webSocket；
3. HTML5常用的結構標簽有哪些，它替換了之前的哪些標簽？
- header、nav、main、article、aside、footer、section
- <div class="header">、<div class="nav">、<div class="main">...
4. HTML文檔采用 UTF-8編碼集 的優勢是什么？
- utf-8： 使用3個字節表示一個符號，基本上可以覆蓋世界上所有的語言；
- 優勢： 與傳統的gb2312、gbk相比，可識別的字符集更多，也是行業界推薦的；
5. 標簽中常用的屬性有哪些？
6. 標簽中的 title屬性 和 alt屬性 的區別是什么？
- title： 是標簽的描述屬性，當鼠標移入時，稍等一會兒就會出現title屬性的屬性值；
- alt: 用在可置換元素上，當外部資源無法正確加載時，alt屬性的屬性值就會顯示在占位符上；
7. 什么是置換元素 和 非置換元素，每種類型至少舉出三個例子
- 置換元素： 置換元素的內容來自外部，該元素僅是外部資源的占位符； <img>、<video>、<audio>...；
- 非置換元素： 非置換元素內容來自當前文檔，必須使用雙標簽； <p>、<h1> ~ <h6>、<ul>...；
8. 標簽中的 href屬性 和 src屬性 有什么區別？
- 二者都是對外部資源的引用；
- href： 用于超文本或樣式，用在 <link>標簽 和 <a>標簽上；
- src： 用在外部資源占位符上，如<img>、<iframe>、<script>、<video>...；
9. iframe標簽有什么優缺點？
- 優點： 重載頁面時不需要加載整個頁面，只需要重載頁面中的一個框架頁，從另一方面來說，減少數據的傳輸，加快了網頁下載速度； 技術易于掌握，使用方便，可主要使用于不需要搜索引擎來搜索的頁面； 當前頁面，直接加載其他頁面，而不必發生跳轉；
- 缺點： iframe 會阻塞主頁面中的 Onload 事件； 會產生很多頁面，不容易管理； 多框架的頁面會增加服務器的http請求，影響頁面的并行加載； 并行加載：同一時間針對不同域名下的請求，iframe和所在頁面在同一個域下面，而瀏覽器的并行加載的數量是有限制的；
10. 表單中的按鈕有幾種，常用的標簽有哪幾個？
- 按鈕有三種： 普通按鈕、提交按鈕、重置按鈕；
- 常用標簽：
<input type="button" />
<input type="submit" />
<input type="rest" />
<button />
11. 表單數據的提交方式有幾種，分析使用場景？
- POST： 表單數據通過請求體發送；
- GET： 表單數據通過URL地址欄發送；
12. 什么是 重繪 和 重排？
- 重繪： 當元素的一部分屬性發生改變，如外觀、背景、顏色等不會引起布局變化，只需瀏覽器根據元素的新屬性重新繪制，使元素呈現新的外觀叫做重繪；
- 重排： 和重繪相反，當改變布局的時候，就會引起重排；
- 重繪不一定需要重排（比如顏色的改變），重排必然導致重繪（比如改變網頁位置）
