著作權宣告

本文原創作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

事件處理概述

在Vue中可非常便利地進行事件處理，例如：點擊事件、滑鼠懸停事件等，

主要步驟：

1、在Vue實體的methods中定義函式，
2、在html中指定事件型別及其對應的處理函式，

事件處理方式

在此，介紹兩種Vue常用的事件處理方式，

方式一

函式定義

在Vue實體的methods中定義函式

函式名:function(){

}

函式呼叫

在html中通過v-on屬性指定事件型別及其對應的處理函式

<標簽名 v-on:事件型別="事件處理函式">標簽體</標簽名>

方式二

函式定義

在Vue實體的methods中定義函式

函式名(){

}

函式呼叫

在html中通過@事件型別屬性指定事件型別及其對應的處理函式

<標簽名 @事件型別="事件處理函式">標簽體</標簽名>

this

Vue實體的methods中定義的函式里可使用this表示當前Vue實體，在開發中，我們可以使用this獲取data中的資料或者呼叫methods中的其它方法，

事件處理示例1

<!DOCTYPE html>
<!-- 引入v-on命名空間-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函式
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                // Vue實體中的方法
                methods:{
                    fun1:function (){
                        console.log("hello fun1");
                    },
                    fun2:function (){
                        console.log("hello fun2");
                    },
                    fun3:function (){
                        console.log(this);
                        // 通過this訪問data中的屬性
                        console.log(this.name);
                        console.log(this.number);
                    },
                    fun4:function (){
                        // 通過this訪問data中的屬性并修改
                        this.name = this.name+"hi ";
                        this.number = this.number+1;
                        // 通過this呼叫methods中的方法
                        this.fun3();
                    },
                    fun5:function (str){
                        // 通過this訪問data中的屬性并修改
                        this.name = this.name+str;
                    },
                    fun6:function (i){
                        // 通過this訪問data中的屬性并修改
                        this.number = this.number+i;
                    },
                    fun7:function (str,i){
                        // 列印方法被呼叫時接收到的引數
                        console.log("str="+str);
                        console.log("i="+i);
                    },
                    fun8:function (paramObject){
                        // 列印方法被呼叫時接收到的物件引數
                        console.log("username="+paramObject.username);
                        console.log("age="+paramObject.age);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <h3>{{number}}</h3>
        <button v-on:click="fun1">按鈕系結點擊事件</button>
        <br/><br/>
        <button v-on:mouseover="fun2">按鈕系結滑鼠懸停事件</button>
        <br/><br/>
        <button v-on:click="fun1" v-on:mouseover="fun2">按鈕同時系結點擊事件和滑鼠懸停事件</button>
        <br/><br/>
        <button v-on:click="fun3">按鈕系結點擊事件與this入門</button>
        <br/><br/>
        <button v-on:click="fun4">按鈕系結點擊事件與this使用</button>
        <br/><br/>
        <button v-on:click="fun5('bye')">按鈕系結點擊事件與方法呼叫傳參1</button>
        <br/><br/>
        <button v-on:click="fun6(2)">按鈕系結點擊事件與方法呼叫傳參2</button>
        <br/><br/>
        <button v-on:click="fun7('nice',99)">按鈕系結點擊事件與方法呼叫傳參3</button>
        <br/><br/>
        <!-- 以物件形式傳遞引數 -->
        <button v-on:click="fun8({username:'zxx',age:50})">按鈕系結點擊事件與方法呼叫傳參4</button>
        <br/><br/>
    </div>
</body>
</html>

在這里插入圖片描述

事件處理示例2

<!DOCTYPE html>
<!-- 引入v-on命名空間-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函式
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                // Vue實體中的方法的簡便寫法
                methods:{
                    fun1(){
                        console.log("hello fun1");
                    },
                    fun2(str,i){
                        console.log(str);
                        console.log(i);
                        // 通過this訪問data中的屬性并修改
                        this.name = this.name+str;
                        this.number = this.number + i;
                    },
                    fun3(){
                        console.log("hello mouseover");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <h3>{{number}}</h3>
        <button @click="fun1">利用@click實作按鈕系結點擊事件的簡便寫法1</button>
        <br/><br/>
        <button @click="fun2('nice',7)">利用@click實作按鈕系結點擊事件的簡便寫法2</button>
        <br/><br/>
        <button @mouseover="fun3()">利用@mouseover實作滑鼠懸停事件的簡便寫法</button>
        <br/><br/>
    </div>
</body>
</html>

在這里插入圖片描述

事件修飾符

事件修飾符常用于對事件進行描述和修飾，它可決定事件觸發條件或阻止事件的觸發，

在此，介紹Vue中常用的事件修飾符，

.once

.once修飾符表示該事件只觸發一次，

.prevent

.prevent修飾符用于阻止標簽的默認行為，

.stop

.stop修飾符用于阻止冒泡事件向上傳遞，

.self

.self修飾表示只監聽自身標簽觸發的事件，忽略冒泡事件，

事件修飾符語法

@事件名.事件修飾符

例如：

@click.self

事件修飾符示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函式
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                methods:{
                    fun1(){
                        console.log("hello fun1");
                    },
                    fun2(){
                        console.log("hello fun2");
                    },
                    fun3(){
                        console.log("hello parent");
                    },
                    fun4(){
                        console.log("hello fun4");
                    },
                    fun5(){
                        console.log("hello parent");
                    },
                    fun6(){
                        console.log("hello fun6");
                    },
                    fun7(){
                        console.log("hello fun7");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>

        <button @click.once="fun1">利用@click實作按鈕系結點擊事件并測驗once修飾符</button>
        <br/><br/>

        <a href="http://blog.csdn.net/lfdfhl" @click.prevent="fun2">利用@click實作超鏈接點擊并測驗prevent修飾符</a>
        <br/><br/>

        <p>事件傳遞及冒泡回顧</p>
        <div style="width: 200px;height: 200px;background: red" @click="fun3">
            <div style="width: 100px;height: 100px;background: green" @click="fun4"></div>
        </div>
        <br/><br/>

        <p>利用@click實作div系結點擊事件并測驗stop修飾符</p>
        <div style="width: 200px;height: 200px;background: red" @click="fun3">
            <div style="width: 100px;height: 100px;background: green" @click.stop="fun4"></div>
        </div>
        <br/><br/>

        <p>利用@click實作div系結點擊事件并測驗self修飾符</p>
        <div style="width: 200px;height: 200px;background: red" @click.self="fun5">
            <input type="button" value="Button1"  @click.stop="fun6"/>
            <br/><br/>
            <input type="button" value="Button2" @click="fun7"/>
        </div>

    </div>
</body>
</html>

在這里插入圖片描述

按鍵修飾符

按鍵修飾符常用于對鍵盤按鍵事件進行修飾，

在此，介紹Vue中常用的按鍵修飾符，

.enter

.enter用于對鍵盤回車鍵修飾

.tab

.tab用于對鍵盤tab按鍵修飾

.esc

.esc用于對esc按鍵修飾

.space

.space用于對空格鍵修飾

.up

.up用于對上鍵修飾

.down

down用于對下鍵修飾

.left

.left用于對左鍵修飾

.right

.right用于對右鍵修飾

按鍵修飾符語法

@按鍵型別.按鍵修飾符

例如：

@keyup.enter

按鍵修飾符示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函式
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527,
                    content:""
                },
                methods:{
                    getContent1(){
                        let input1 = document.getElementById("input1");
                        let content = input1.value;
                        console.log("文本框中輸入的內容為："+content);
                    },
                    getContent2(){
                        console.log("文本框中輸入的內容為："+this.content);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <p>利用@keyup當按下回車鍵時獲取輸入框中的內容(方法1)</p>
        <input id="input1" type="text" @keyup.enter="getContent1" />
        <p>利用@keyup當按下回車鍵時獲取輸入框中的內容(方法2)</p>
        <input id="input2" type="text" v-model="content" @keyup.enter="getContent2" />
    </div>
</body>
</html>

在這里插入圖片描述

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

標籤：其他

上一篇：分解資料庫中的值

下一篇：用uni-app寫一個簡單的豆瓣電影微信小程式

Vue簡明實用教程(04)——事件處理

著作權宣告

事件處理概述

事件處理方式

方式一

函式定義

函式呼叫

方式二

函式定義

函式呼叫

this

事件處理示例1

事件處理示例2

事件修飾符

.once

.prevent

.stop

.self

事件修飾符語法

事件修飾符示例

按鍵修飾符

.enter

.tab

.esc

.space

.up

.down

.left

.right

按鍵修飾符語法

按鍵修飾符示例