在上一节中,我们学习了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>
下面的代码用于为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所需的样式。
以上代码正常显示如下:
将鼠标放在div上,则会执行mouseover函数,背景变绿色,如下所示:
2、VueJS事件修饰符
Vue在v-on属性上有可用的事件修饰符,以下是可用的修饰符。
(1).once
表示只允许事件执行一次。
.once修饰符使用语法如下:
<button v-on:click.once = "click">点击一次</button>
注意,我们需要在使用修饰符时添加点操作符,如上面的语法所示。看下面的一个例子中如何使用.once修饰符,并理解.once修饰符的工作原理。
在上面的例子中,我们创建了两个buttton,带有”点击一次”标签的按钮添加了.once修饰符,而另一个按钮没有任何修饰符。
clicknum和clicknum1这两个变量分别记录两个按钮的有效点击次数,当点击按钮时,两者都会递增。两个变量都初始化为0,在上面的输出中可以看到显示。点击第一个按钮时,变量clicknum增加1,在第二次单击时,数字不会增加,因为修改器阻止它执行或执行在点击按钮时不作任何操作项。在点击第二个按钮时,执行相同的操作,即变量递增,每次单击时,值都会递增并显示。
(2).prevent
该修饰符可以阻止事件往下传递执行,只执行指定的方法就结束事件。
使用语法如下:
<a href = "http://www.srcmini02.com" v-on:click.prevent = "clickme">点击</a>
下面是.prevent修饰符的使用例子:
<div id="app">
<a href="http://www.srcmini02.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修饰符阻止了事件的向下传递执行,显示效果如下:
其它修饰符还有.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>
其中其它的按键符还有:
.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>