Vue语法-事件驱动

10 个月前 · 来自专栏前端

会飞的耗子

产品经理～前端开发～爱生活，爱分享

1 案例一: 字符串顺序反转

HTML代码

<div id="app">
	<p>{{message}}</p>
	<!-- v-on:事件类型="事件响应函数的函数名" -->
	<button v-on:click="reverseMessage">Click me,reverse message</button>

Vue代码

var app = new Vue({
	"el":"#app",
	"data":{
		"message":"Hello Vue!"				
	"methods":{
		"reverseMessage":function(){
			this.message = this.message.split("").reverse().join("");

2 案例二:获取鼠标移动时的坐标信息

HTML代码

<div id="app">
	<div id="area" v-on:mousemove="recordPosition"></div>
	<p id="showPosition">{{position}}</p>

Vue代码

var app = new Vue({
	"el":"#app",
	"data":{
		"position":"暂时没有获取到鼠标的位置信息"
	"methods":{
		"recordPosition":function(event){
			this.position = event.clientX + " " + event.clientY;

扩展:

v-on:事件名="函数"可以简写成@事件名=“函数”

3 取消控件的默认行为

3.1 控件默认行为

点超链接会跳转页面
点表单提交按钮会提交表单

本来控件的默认行为是天经地义就该如此的，但是如果我们希望点击之后根据我们判断的结果再看是否要跳转，此时默认行为无脑跳转的做法就不符合我们的预期了。

3.2 取消方式

调用 事件对象 的**preventDefault()**方法。

超链接举例

HTML代码：

<a id="anchor" href="http://www.baidu.com">超链接</a>

JavaScript代码：

document.getElementById("anchor").onclick = function() {
    console.log("我点击了一个超链接");
    //event.preventDefault();

表单提交按钮举例

HTML代码：

<form action="http://www.baidu.com" method="post">
    <button id="submitBtn" type="submit">提交表单</button>
</form>

JavaScript代码：

document.getElementById("submitBtn").onclick = function() {
    console.log("我点击了一个表单提交按钮");
    event.preventDefault();

4 阻止事件冒泡

图中的两个div，他们的HTML标签是：

<div id="outterDiv">
	<div id="innerDiv"></div>

点击里面的div同时也等于点击了外层的div，此时如果两个div上都绑定了单击响应函数那么就都会被触发：

document.getElementById("outterDiv").onclick = function() {
	console.log("外层div的事件触发了");
document.getElementById("innerDiv").onclick = function() {
	console.log("内层div的事件触发了");

所以事件冒泡就是一个事件会不断向父元素传递，直到window对象。

如果这不是我们想要的效果那么可以使用事件对象的stopPropagation()函数阻止。

document.getElementById("innerDiv").onclick = function() {
	console.log("内层div的事件触发了");
	event.stopPropagation();

5 Vue事件修饰符

对于事件修饰符，Vue官网的描述是：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

5.1 取消控件的默认行为

控件的默认行为指的是：

点击超链接跳转页面
点击表单提交按钮提交表单

实现这个需求使用的Vue事件修饰符是：.prevent

<a href="http://www.baidu.com" @click.prevent="clickAnchor">超链接</a>
<form action="http://www.baidu.com" method="post">
	<button type="submit" @click.prevent="clickSubmitBtn">提交表单</button>