srcmini在上一节中，我们学习了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>
评论前必须登录！
注册