Vue如何處理事件

v-on指令用法

<div><button v-on:click='number++'>按鈕</button></div>

v-on簡寫形式

<div><button @click='number++'>按鈕</button></div>

事件函式的呼叫方式

直接系結函式名稱

<div><button @click='handler'>按鈕</button></div>

直接呼叫函式

<div><button @click='handler()'>按鈕</button></div>

函式呼叫引數傳遞

普通引數和事件物件

<div><button @click='sayHi("hi",$event)'>Hi</button></div>

var vm = new Vue({
    el: '#app',
    data: {
        number: 0,
    },
    methods: {
        sayHi: function(p, event) {
            console.log(p);
            console.log(event.target.innerHTML);
            this.number++;
        },
    }
});

事件系結-引數傳遞總結

如果事件直接系結函式名稱，那么默認會傳遞事件物件($event)作為事件函式的第一個引數
如果事件系結函式呼叫，那么事件物件($event)必須作為最后一個引數傳遞，并且事件物件的名稱必須是$event

事件修飾符

.stop阻止冒泡

<div @click="f0">
    <button @click='f1'>按鈕</button>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        number: 0,
    },
    methods: {
        f0: function() {
            console.log(event.target.innerHTML);
        },
        f1: function() {

        },
    }
});

當點擊按鈕時，便會觸發呼叫f1和f0函式，事件冒泡到f0了，若想阻止冒泡，添加事件修飾符.stop即可

<button @click.stop='f1'>按鈕</button>

.prevent阻止默認行為
```
<div>
    <a href="http://www.baidu.com">百度</a>
</div>
```
點擊a標簽之后，頁面將會跳轉到百度頁面，如果想要阻止這個行為，添加.prevent事件修飾符即可
```
<a href="http://www.baidu.com" @click.prevent="handler1">百度</a>
```

按鍵修飾符

.enter 回車鍵

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按鍵修飾符</title>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                用戶名：
                <input type="text" v-model='username'>
            </div>
            <div>
                密 碼：
                <input type="text" v-on:keyup.enter="submitHandle" v-model='password'>
            </div>
            <div>
                <input type="button" v-on:click="submitHandle" value="提交">
            </div>
        </form>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
            },
            methods: {
                // 提交函式
                submitHandle: function() {
                    console.log(this.username, this.password);
                },
            }
        });
    </script>
</body>

</html>

上述代碼為提交按鈕定義了一個提交函式(submitHandle)，當按鈕被點擊之后就會觸發這個函式，同時給密碼框加上.enter回車鍵修飾符，當按下回車鍵之后也會觸發submitHandle函式，

.delete 洗掉鍵

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按鍵修飾符</title>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                用戶名：
                <input type="text" v-on:keyup.delete="clearContent" v-model='username'>
            </div>
            <div>
                密 碼：
                <input type="text" v-on:keyup.enter="submitHandle" v-model='password'>
            </div>
            <div>
                <input type="button" v-on:click="submitHandle" value="提交">
            </div>
        </form>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
            },
            methods: {
                // 提交函式
                submitHandle: function() {
                    console.log(this.username, this.password);
                },
                clearContent: function() {
                    // 按delete鍵的時候清空用戶名
                    this.username = '';
                }
            }
        });
    </script>
</body>

</html>

上述代碼為用戶框用加上了.delete 按鍵修飾符和系結clearContent函式，當用戶點擊Delete按鍵之后將會清空用戶名，

自定義按鍵修飾符

方式1——通過ASCILL定義

<div>
	<input type="text" v-on:keyup.65="showASCILL">
</div>

var vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {
        showASCILL: function(event) {
            console.log(event.keyCode);
        }
    }
});

方式2——通過全域config.keyCodes物件定義

<div>
    <input type="text" v-on:keyup.x="showASCILL">
</div>

Vue.config.keyCodes.x = 66;
var vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {
        showASCILL: function(event) {
            console.log(event.keyCode);
        }
    }
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258743.html

標籤：其他

上一篇：spring security+oauth2退出登錄（一）-正常的退出登錄

下一篇：springboot客戶管理系統網站(跟蹤服務/投訴反饋/業務聯系人/資信性質級別)javaweb+ssm

Vue框架——事件系結