Vue中的事件處理詳情

Posted on by

一、事件處理

給按鈕綁定一個 click 事件，點擊彈出提示信息

	<!--普通寫法-->
    <button v-on:click="showInfo">點我</button>
    <!--簡寫-->
    <button @click="showInfo">點我</button>

	new Vue({
        el:'#root',
        methods:{
            showInfo(){
                alert('Hello')
            }
        }
    })

 我們來增加參數：

<button @click="showInfo($event,'world')">點我</button>

showInfo(event,name){
	//console.log(event.target.innerHTML);//點我
	//console.log(this);//此處的this是vm（vue實例對象）
	//所有被vue管理的函數最好都寫成普通函數，不要寫成箭頭函數
	//否則this就變成瞭window
	 alert('Hello '+name)
}

 如果隻寫 showInfo('world') 那麼方法中的 event 參數就不能用瞭，所以我們加瞭一個 $event來占位

事件的基本使用 ：

  • 1.使用v-on :xxx或@xxx綁定事件，其中xxx是事件名
  • 2.事件的回調需要配置在 methods 對象中，最終會在 vm 上
  • 3.methods 中配置的函數，不要用箭頭函數！否則 this 就不是 vm 瞭
  • 4.methods 中配置的函數，都是被Vue 所管理的函數，this 的指向是 vm 或組件實例對象
  • 5.@click="demo”和@click="demo($event)”效果一致，但後者可以傳參

二、事件修飾符

Vue中的事件修飾符

  • 1.prevent: 阻止默認事件
  • 2.stop:阻止事件冒泡
  • 3.once:事件隻觸發一次
  • 4.capture:使用事件的捕獲模式
  • 5.self:隻有 event.target 是當前操作的元素時才觸發事件
  • 6.passive:事件的默認行為立即執行，無需等待事件回調執行完畢
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初識</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        *{
            margin: 20px;
        }

        .demo1{
            width: 100px;
            height: 100px;
            background: aqua;
        }
        .div1{
            padding: 5px;
            background: skyblue;
        }
        .div2{
            padding: 5px;
            background: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background: hotpink;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <!--阻止默認事件。默認點擊後提示信息，然後跳轉百度首頁，現在隻提示信息不跳轉-->
    <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.prevent="showInfo">點我提示信息</a>
    <!--阻止事件冒泡，本來點擊按鈕後會提示信息，事件冒泡到div上，還會再彈信息，現在隻會彈一次-->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">點我提示信息</button>
    </div>
    <!--事件隻觸發一次，本來每次點都提示信息，現在隻提示一次，再點擊就不提示瞭-->
    <button @click.once="showInfo">點我提示信息</button>
    <!--使用事件的捕獲模式，本來點擊div2，控制臺會輸出div2，然後輸出div1。因為從div2冒泡到瞭div1 -->
    <!--事件是先捕獲再冒泡-->
    <!--在div1增加瞭.capture那麼div1的事件在捕獲階段就開始瞭，所以控制臺會先輸出div1再div2-->
    <div class="div1" @click.capture="showMsg('div1')">
        div1
        <div class="div2" @click="showMsg('div2')">
            div2
        </div>
    </div>
    <!--隻有 event.target 是當前操作的元素時才觸發事件-->
    <!--本來會提示兩遍信息，如果在方法中輸出event.target，那麼會輸出兩遍button-->
    <!--現在給div1增加瞭.self,當點擊按鈕時，click事件冒泡到div1後，觸發div1的click-->
    <!--但是click的event.target是button，而不是div1，所以這次冒泡後的click不執行-->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">點我提示信息</button>
    </div>
    <!--事件的默認行為立即執行，無需等待事件回調執行完畢-->
    <!--scroll是頁面滾動條滾動會觸發的事件，而wheel是鼠標滾輪滾動會觸發的事件-->
    <!--一旦滾動條到底部後，滑動鼠標滾輪繼續滾動，wheel就會一直觸發，而scroll不會觸發-->
    <!--@wheel 當滾輪滾動後，執行demo，執行完demo，頁面上的滾動條才向下滾動-->
    <!--@wheel 增加.passive後，當滾輪滾動後，滾輪會先執行，不用等待執行完demo-->
    <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                alert('你好')
                //console.log(e.target);
            },
            showMsg(res){
                console.log(res);
            },
            demo(){
                for (let i=0;i<100000;i++){
                    console.log("#");
                }
                console.log("累~~！！");
            }
        }
    })
</script>
</body>
</html>

三、鍵盤事件

給 input 綁定一個 keyup 事件，輸入文字按下回車，打印輸入內容，可以這樣寫：

<input type="text" placeholder="按下回車提示輸入" @keyup="showInfo">
new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                //判斷是否回車
                if(e.keyCode !== 13) return
                console.log(e.target.value);
            }
        }
    })

但我們也可以使用回車鍵的別名：

<input type="text" placeholder="按下回車提示輸入" @keyup.enter="showInfo">
new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                console.log(e.target.value);
            }
        }
    })

1、Vue中常用的按鍵別名 回車 =>enter 刪除=>delete(捕獲"刪除”和“退格”鍵) 退出=>esc 空格=>space 換行=> tab（特殊，必須配合 keydown 去使用） 上=> up 下=>down 左=>left 右=>right

2、Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但註意要轉為 kebab-case（短橫線命名)

我們可以通過輸出 e.key 和 e.keyCode 來查看按鍵原始值

showInfo(e){
	console.log(e.key,e.keyCode);
}

所以回車鍵也可以這樣寫 @keyup.Enter="showInfo" 需要註意的是切換大小寫的 CapsLock 需要這樣寫 @keyup.caps-lock="showInfo"

3、系統修飾鍵(用法特殊）：ctrl、alt、 shift、meta(win)

(1).配合 keyup 使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發(2).配合keydown使用：正常觸發事件

例如我們需要按下 ctrl 時執行 showInfo 方法

<input type="text" placeholder="按下回車提示輸入" @keyup.ctrl="showInfo">

運行程序，單純按 ctrl 是不管用的，隻有 ctrl 和其他按鍵一起按下，例如 ctrl+z 然後再放開 z ，showInfo 方法才能執行

4、也可以使用keyCode去指定具體的按鍵（不推薦)

綁定回車按鍵

<input type="text" placeholder="按下回車提示輸入" @keyup.13="showInfo">

5.Vue.config.keyCodes.自定義鍵名=鍵碼,可以去定制按鍵別名（不推薦）

<input type="text" placeholder="按下回車提示輸入" @keyup.huiche="showInfo">
Vue.config.keyCodes.huiche = 13

使用技巧

1、事件修飾符可以寫多個

<div class="demo1" @click="showInfo">
	<a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.stop.prevent="showInfo">點我提示信息</a>
</div>

運行結果是隻會提示 1 次信息，不會跳轉

2、之前說瞭系統修飾符配合 keyup 使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。如果就是需要兩個按鍵同時觸發事件可以這樣寫： 例如，需要同時按下 ctrl+y 才執行 showInfo

<input type="text" placeholder="按下回車提示輸入" @keyup.ctrl.y="showInfo">

到此這篇關於Vue中的事件處理詳情的文章就介紹到這瞭,更多相關Vue事件處理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：