事件綁定
1.指令v-on
Vue使用v-on指令監聽DOM事件，我們可以使用v-on指令綁定到DOM節點上，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令v-on</title>
</head>
<body>
<div id="app">
<button v-on:click="logInfo()">打印消息（default:Hello World）</button><br>
<button v-on:click="logInfo('Self Message')">打印消息（'Self Message'）</button><br>
<button v-on:click="console.log('A Vue app')">打印消息（'A Vue app'）</button><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
}
},
methods:{
logInfo(msg){
console.log(msg || 'Hello World');
}
}
});
</script>
</body>
</html>
同時v-on也可以簡寫爲@
2.獲取事件對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取事件對象</title>
</head>
<body>
<div id="app">
<!--1.在事件函數不需要傳參市可以這樣寫-->
<input type="text" @keyup="handleKeyUp"><br>
<!--2.手動傳入$event對象-->
<input type="text" @keyup="handleKeyUp($event)">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
}
},
methods:{
handleKeyUp(event){
console.log(event.key,event)
}
}
});
</script>
</body>
</html>
3. 常見的修飾符
| 名稱 | 可用版本 | 可用事件 | 說明 |
|---|---|---|---|
| .stop | 所有 | 任意 | 當時間出發時，阻止事件冒泡 |
| .prevent | 所有 | 任意 | 當事件觸發時，組織元素默認行爲 |
| .capture | 所有 | 任意 | 當事件觸發時，阻止事件捕獲 |
| .self | 所有 | 任意 | 限制事件僅用於節點本身 |
| .once | 2.1.4以上 | 任意 | 事件被觸發一次後即解除監聽 |
| .passive | 2.3.0以上 | 滾動 | 移動端，限制事件永不調用preventDefault()方法 |
4.案件修飾符
| 別名修飾符 | 鍵值修飾符 | 對應按鍵 |
|---|---|---|
| .delete | .8/.46 | 回格/刪除 |
| .tab | .9 | 製表 |
| .enter | .13 | 回車 |
| .esc | .27 | 退格 |
| .space | .32 | 空格 |
| .left | .37 | 左 |
| .up | .38. | 上 |
| .right | .39 | 右 |
| .down | .40 | 下 |
5.組合修飾符
| 修飾符 | 可用版本 | 對應鍵 |
|---|---|---|
| .ctrl | 2.1.0以上 | Ctrl鍵 |
| .alt | 2.1.0以上 | Alt鍵 |
| .shift | 2.1.0以上 | Shift鍵 |
| .meta | 2.1.0以上 | meta鍵（Window系統上爲 田鍵） |
下面的這個案例實現了按住Ctrl再點擊鼠標的事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組合修飾符</title>
<style>
.changeMouse{
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h1 @click.ctrl="logWithCtrl" @click="logSingle" @mouseover="addActive">按住Ctrl點擊</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el:'#app',
data(){
return{
}
},
methods:{
addActive(event){
event.currentTarget.className="changeMouse"
},
logSingle(event){
if (!event.ctrlKey){
console.log('------------分割線-----------');
console.log('$event.ctrlKey:',event.ctrlKey);
console.log('已經點擊過了。。。')
}else {
console.log('.......')
}
},
logWithCtrl(event){
console.log('------------分割線-----------');
console.log('$event.ctrlKey:',event.ctrlKey);
console.log('按住Ctrl，點擊的。。。')
}
}
});
</script>
</body>
</html>
小白一枚，如有問題，請多多指教😃