个性化阅读
专注于IT技术分析

VueJS事件处理v-on用法全解

在上一节中,我们学习了VueJS指令v-bind、v-model和其它数据绑定,VueJS中的数据绑定方式可以使用v-bind、v-model,其它的还可以结合修饰符进行数据绑定。本文开始学习VueJS的事件处理,Vue里面的事件处理主要是使用v-on指令,v-on是添加到DOM元素中的属性,用于监听VueJS中的事件。

1、v-on和点击事件处理

下面是使用v-on:click处理点击事件的例子

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS时间处理</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <button v-on:click="shownumber">点击</button>
        <h2>计算 100 + 200 = {{total}}</h2>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                num1: 100,
                num2: 200,
                total: ""
            },
            methods: {
                shownumber: function (event) {
                    console.log(event);
                    return this.total = this.num1 + this.num2;
                }
            },
        });
    </script>
</body>

</html>
v-on处理事件使用实例

下面的代码用于为DOM元素设置点击事件:

<button v-on:click="shownumber">点击</button>

v-on提供一个简写,我们也可以按如下方式调用事件,使用@+事件名,如下:

<button @click="shownumber">点击</button>

单击按钮时,调用shownumber方法,该方法将处理事件,在浏览器中显示了相应的处理,如上图所示。

现在我们继续看另外的事件mouseover,mouseout,看下面的例子:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS时间处理</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-bind:style="styleobj" v-on:mouseover="changebgcolor" v-on:mouseout="originalcolor"></div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                num1: 100,
                num2: 200,
                total: '',
                styleobj: {
                    width: "100px",
                    height: "100px",
                    backgroundColor: "red"
                }
            },
            methods: {
                changebgcolor: function () {
                    this.styleobj.backgroundColor = "green";
                },
                originalcolor: function () {
                    this.styleobj.backgroundColor = "red";
                }
            },
        });
    </script>
</body>

</html>

在上面的例子中,我们创建了一个宽度和高度都为100px的div,并将它的背景设置为红色。在mouseover上,将颜色更改为绿色,而在mouseout上,我们将颜色更改为红色。

在鼠标悬停期间,调用方法changebgcolor,一旦将鼠标移出div,即调用方法originalcolor。

div添加两个事件(mouseover和mouseout),如上所示,我们已经创建了一个styleobj变量对象,该变量储存div所需的样式。

以上代码正常显示如下:

v-on鼠标悬停显示实例

将鼠标放在div上,则会执行mouseover函数,背景变绿色,如下所示:

v-on鼠标悬停mouseover显示效果

2、VueJS事件修饰符

Vue在v-on属性上有可用的事件修饰符,以下是可用的修饰符。

(1).once

表示只允许事件执行一次。

.once修饰符使用语法如下:

<button v-on:click.once = "click">点击一次</button>

注意,我们需要在使用修饰符时添加点操作符,如上面的语法所示。看下面的一个例子中如何使用.once修饰符,并理解.once修饰符的工作原理。

VueJS修饰符.once使用实例

在上面的例子中,我们创建了两个buttton,带有”点击一次”标签的按钮添加了.once修饰符,而另一个按钮没有任何修饰符。

clicknum和clicknum1这两个变量分别记录两个按钮的有效点击次数,当点击按钮时,两者都会递增。两个变量都初始化为0,在上面的输出中可以看到显示。点击第一个按钮时,变量clicknum增加1,在第二次单击时,数字不会增加,因为修改器阻止它执行或执行在点击按钮时不作任何操作项。在点击第二个按钮时,执行相同的操作,即变量递增,每次单击时,值都会递增并显示。

(2).prevent

该修饰符可以阻止事件往下传递执行,只执行指定的方法就结束事件。

使用语法如下:

<a href = "http://www.srcmini.com" v-on:click.prevent = "clickme">点击</a>

下面是.prevent修饰符的使用例子:

<div id="app">
        <a href="http://www.srcmini.com" v-on:click.prevent="clickme" target="_blank" v-bind:style="styleobj">点击</a>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                clicknum: 0,
                clicknum1: 0,
                styleobj: {
                    color: '#4CAF50',
                    marginLeft: '20px',
                    fontSize: '30px'
                }
            },
            methods: {
                clickme: function () {
                    alert("点击a标签");
                }
            }
        });
    </script>

在以上的代码中,a标签添加了一个点击事件click,如果不使用v-on:click.prevent,那么点击a标签,弹出窗口,点击确定会继续打开新页面。但是使用了.prevent修饰符之后,在弹窗窗口点击确定后,不再执行打开新页面,也就是.prevent修饰符阻止了事件的向下传递执行,显示效果如下:

VueJS修饰符.prevent使用实例

其它修饰符还有.stop、.capture、.self,其中.stop阻止点击事件冒泡,.capture用于添加事件监听器时使用事件捕获模式,.self用于只当事件在该元素本身(不是子元素)触发时,触发回调。

3、使用按键修饰符监听事件

VueJS提供了按键修饰符,我们可以根据这些修饰符来控制事件处理。假设我们有一个文本框,我们希望只在按下Enter键时调用该方法,我们可以通过如下方式向事件添加键修饰符来做到这一点。

<input type = "text"  v-on:keyup.enter = "showvalue"/>

在这里,我们希望应用事件的按键符是v-on:eventname.keyname,也可以使用其它的按键,还可以使用多个按键符,如v-on:keyup.ctrl.enter,下面是使用按键修饰符的例子:

<div id="app">
        <input type="text" v-on:keyup.enter="showvalue" v-bind:style="styleobj" placeholder="输入名称" />
        <h3> {{name}}</h3>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                name: '',
                styleobj: {
                    width: "30%",
                    padding: "12px 20px",
                    margin: "8px 0",
                    boxSizing: "border-box"
                }
            },
            methods: {
                showvalue: function (event) {
                    this.name = event.target.value;
                }
            }
        });
    </script>
VueJS按键修饰符实例

其中其它的按键符还有:

.tab、.delete、.esc、.space、.up、.down、.left、.right、.ctrl、.alt、.alt、.shift、.meta。

4、VueJS自定义事件

父组件可以使用prop属性将数据传递给它的组件,但是,我们需要在子组件发生变化时告诉父组件,为此,我们可以使用自定义事件。父组件可以使用v-on属性监听子组件事件,下面是一个使用例子:

<div id="app">
        <div id="counter-event-example">
            <p style="font-size:25px;">显示 : <b>{{ languageclicked }}</b></p>
            <button-counter v-for="(item, index) in languages" v-bind:item="item" v-bind:index="index"
                v-on:showlanguage="languagedisp"></button-counter>
        </div>
    </div>
    <script type="text/javascript">
        Vue.component('button-counter', {
            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
                return {
                    counter: 0
                }
            },
            props: ['item'],
            methods: {
                displayLanguage: function (lng) {
                    console.log(lng);
                    this.$emit('showlanguage', lng);
                }
            },
        });
        var app = new Vue({
            el: '#app',
            data: {
                languageclicked: "",
                languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
                languagedisp: function (a) {
                    this.languageclicked = a;
                }
            }
        })
    </script>
VueJS自定义事件实例
赞(0) 打赏
未经允许不得转载:srcmini » VueJS事件处理v-on用法全解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏