事件的基本使用
- 使用
v-on:xxx或者@xxx繫結事件，其中xxx是事件名 - 事件的回撥需要配置在
methods物件中，最終會在vm裡面 - methods中配置的函式，不要用箭頭函式 ，否則使用this指的不是vm
- methods中配置的函式，都是被Vue所管理的函式，this指向的是vm或元件例項物件
@click="demo"和@click="demo($event)"效果一樣，但後者可以傳參，例如@click="demo($event, 66)"， 這裡指傳入數字66
事件修飾符
Vue中的事件修飾符
prevent：阻止預設事件（常用）
<a href="https://www.baidu.com" @click.prevent="showInfo">點我</a>
//預設事件為跳轉頁面，這裡阻止了頁面跳轉
-
stop：阻止事件冒泡（常用） -
once：事件只觸發一次(常用) -
capture：使用事件的捕獲模式 -
self：只有event.target是當前操作的元素時，才觸發事件 -
passive：事件的預設行為立即執行，無需等待事件回撥執行完畢
<div id="room">
<h3>修飾符可以鏈式呼叫。 例如： @click.prevent.stop </h3>
<!-- 這裡阻止了a標籤的預設跳轉網頁事件 -->
<a href="https://www.baidu.com" @click.prevent="showInfo">點我</a>
<div class="demo" @click="showInfo">
<button @click.stop="showInfo">阻止事件冒泡</button>
</div>
<button @click.once="showInfo">只觸發一次</button>
<!-- 使用事件捕獲模式 -->
<!-- 事件有捕獲階段(從外往內)和冒泡階段(從內往外) ，一般事件處理是在冒泡階段，所以點選div2時，先列印2再列印1。可以用capture使事件處理在捕獲階段，這樣就是先列印1再列印2-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是當前操作的元素時才觸發事件 -->
<!-- 本來點選按鈕會冒泡到div，從而觸發兩次點選事件，但是div加了self後，由於點選的是btn，所以event.target是btn而不是div，所以不會觸發div的點選事件（阻止冒泡的另一種方式）-->
<div class="demo" @click.self="showInfo">
<button @click="showInfo">點我</button>
</div>
<!-- 事件的預設行為立即執行，無需等待時間回撥執行完畢 -->
<!-- 滾動事件分為:捲軸滾動scroll && 滑鼠滾輪滾動wheel -->
<!-- 捲軸滾動，一旦滾動到底，就不再觸發滾動事件裡的程式碼；先捲軸滾動再觸發事件裡的程式碼 -->
<!-- 滑鼠滾輪只要一直滾，捲軸到底了也可以繼續執行滾動事件裡的程式碼；先觸發事件裡的程式碼再滾動 -->
<!-- 所以這裡如果使用wheel就需要最佳化，使用passive，讓程式碼立即執行，無需等待捲軸滾動 -->
<div class="list" @wheel.passive="demo">
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<script>
// 建立Vue例項
const vm = new Vue({
el: '#room',
data: {
name: 'cloud'
},
methods: {
showInfo(e) {
// e.preventDefault();// a的預設事件是跳轉頁面，這個方法可以阻止預設事件
//e.stopPropagation();//阻止事件冒泡
alert('你好')
},
showMsg(msg) {
console.log(msg)
},
demo() {
for(let i = 0; i < 10000; i++) {
console.log('$')
}
console.log('finish')
}
},
})
</script>
鍵盤事件
鍵盤上的每個按鍵都有自己的名稱和編碼，例如：Enter（13）.Vue還對一些常用的按鍵起了別名便於使用
Vue中常用的按鍵別名
enter：回車delete：刪除（捕獲delete鍵和<———鍵）esc：退出space：空格tab：換行，必須配合keydown使用up：上down：下left：左right：右
Vue未提供別名的按鍵
可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case(短橫線命名)
<!-- 使用自定義鍵名 -->
<input type="text" name="" id="" @keydown.huiche="showInfo">
...
//宣告自定義鍵名
//Vue.config.keyCodes.自定義鍵名 = 鍵碼
Vue.config.keyCodes.huiche = 13
系統修飾符（特殊）
例如ctrl、alt、shift、meta（win鍵）等都是系統修飾符
- 配合
keyup使用：按下修飾鍵的特殊，再按下其他鍵，隨後釋放其他鍵，事件才被觸發 - 配合
keydown使用：正常觸發事件
<div id="room">
<h1>
Hello, {{name}}
</h1>
<h3>keyup：按下後鬆手才觸發</h3>
<h3>keydown：按下後就觸發</h3>
<input type="text" placeholder="按下回車提示輸入" @keyup="showInfo">
<h3>自定義鍵名</h3>
<input type="text" name="" id="" @keydown.huiche="showInfo">
<h3>按下tab</h3>
<!-- tab只適合跟keydown配合使用，因為tab一按下，焦點就會離開輸入框，而事件的物件又是這個輸入框，所以如果用up則無法觸發事件</br> -->
<input type="text" @keyup.tab="showInfo">
<!-- 系統修飾鍵指定某個按鍵配合使用,例如ctrl+y才觸發事件 -->
<input type="text" name="" id="" @keyup.ctrl.y="showInfo">
</div>
<script>
//自定義鍵名
Vue.config.keyCodes.huiche = 13
const vm = new Vue({
el: '#room',
data: {
name: 'cloud'
},
methods: {
showInfo(e) {
// if (e.keyCode !== 97) return
console.log(e.keyCode)
}
}
})
</script>