Vue.js系列（七）： Vue的事件处理！
前言
注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js：Vue系列: windows下npm安装vue
今天博主将为大家分享Vue.js系列（七）： Vue的事件处理！不喜勿喷，如有异议欢迎讨论！
有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！，注意：下面的案例请自己手打一下运行效果查看
其他事件如:blur,change,focus,submit等等from事件都可以通过v-on指令绑定.!
目标
1. 学习vue中事件的绑定处理
2. 学习事件修饰符
1.1.1 v-on指令绑定
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
v-on等价于 @ + 事件名
例如: v-on:click=func 等价于 @click=func
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例，Vue的事件！</title>
<script src="js/Vue.min.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="n+=1">
点我
</button>
<p>
您共点击了<strong v-text="n"></strong>次按钮!
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
n:0
}
})
</script>
</body>
</html>
其他事件如:blur,change,focus,submit等等from事件都可以通过v-on指令绑定.
1.1.2 vm.$on绑定
vm.$on(event,callback)
参数
event: {string | Array<string>} 事件名或包含事件名的数组
callback: function 回调函数
通过vm.$on监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
1.1.3 vm.$off移除绑定
vm.$off(event,callback) 移除自定义事件监听器。
参数
event: {string | Array<string>} 事件名或包含事件名的数组
callback: function 回调函数
用法
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
1.1.4 vm.$emit触发事件
vm.$emit(event, […args])
触发当前实例上的事件。附加参数都会传给监听器回调。
1.1.5 自定义事件监听示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>事件处理</title>
</head>
<body>
<div id="app">
<h4>我的购物车<span v-text="a"></span></h4>
<ul>
<li v-for="c in carts" v-on:click="calc(c)">
<span v-text="c.title"></span><strong v-text="c.price"></strong>
<span v-if="c.count > 0">
√ 已选择 <em v-text="c.count"></em> 件
</span>
<button v-on:click.stop="c.count > 0 && minus(c)">
-
</button>
</li>
</ul>
<p v-text="`共计￥:${totalPrice}元`"></p>
</div>
<script src="../../vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
a: "1",
carts: [{
title: "苹果",
price: 2.5,
count: 0
},
{
title: "香蕉",
price: 5.5,
count: 0
},
{
title: "西瓜",
price: 10,
count: 0
},
],
sum: 0
},
created: function() {
this.$on("summary", this.total);
},
computed: {
totalPrice: function() {
return this.sum.toFixed(2);
}
},
watch: {
'a': function(v) {
return v + '元';
}
},
methods: {
minus: function(c) {
console.log(c.count);
c.count--;
console.log(c.count);
this.$emit("summary");
},
calc: function(c) {
c.count++;
this.$emit("summary");
},
total: function() {
this.sum = 0;
for (var i = 0; i < this.carts.length; i++) {
console.log(this.carts[i].title, this.carts[i].price * this.carts[i].count)
this.sum += this.carts[i].price * this.carts[i].count;
}
}
}
});
</script>
</body>
</html>
2.2 事件
通常情况下v-on会绑定一个函数去处理相关的业务.
通常事件会被绑定给一个函数
2.3 条件事件
条件事件是常用的一种应用场景.
即: 当表达式条件满足时,才触发相应的事件.
2.4 事件修饰符
.stop修饰符
阻止事件继续向上级传播.
.prevent修饰符
取消事件的默认动作。用于拥有默认动作的html标签 例如: <a>,<form>标签等.
.capture修饰符
使事件的触发顺序变为由外到内的顺序触发.
.self修饰符
只会触发元素本身的事件.事件不从内部的子孙元素触发.
即:event.target是当前元素本身时才会触发事件
.once修饰符
.once 修饰符 元素所绑定的事件仅触发1次
事件修饰符可以叠加使用
点击 button按钮中的 strong或strong内部的span标签时,不会触发button 的click事件.点击button按钮中除strong标签以外的区域时,才会触发click事件.
案例代码(从2.2开始到结束)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>事件处理</title>
</head>
<body>
<div id="app">
<button type="button" v-on:click="calc">
点我++
</button>
<button type="button" v-on:click="n<5 && calc($event)">
<span v-if="n<5">点我++</span>
<span v-else>事件被移除</span>
</button>
<button type="button" v-on:click="n<5? calc():minus()">
<span v-if="n<5">点我++</span>
<span v-else>点我--</span>
</button>
<p>
您共点击了<strong v-text="n"></strong>次按钮!
</p>
<div>
<!-- form 表单的 submit 事件使用了 .prevent 修饰符,即代表在触发 submit 时,调用了 stopPropagation() 方法,阻止了submit的默认行为(post). -->
<!-- 当form表单被提交时,会调用 save 事件,而不是form的默认行为. -->
<form method="post" action="index.html" v-on:submit.prevent="save">
<button type="submit">
<!-- submit 按钮内的 span 的 click 事件使用 .prevent 即代表 span的click事件不会传播给button -->
<span v-on:click.prevent="go">提交</span>表单
</button>
<button type="submit">测试2</button>
</form>
<form action="index.html" method="post" v-on:submit.prevent="save">
<button type="submit" v-on:click="go2">
<!-- .stop修饰符.阻止click事件传递给button,但仍会触发form的默认事件. -->
<!-- 会调用 函数 go 和 save -->
<span v-on:click.stop="go">.stop测试</span>
<!-- 会调用 函数 go2 和 save -->
<strong>按钮</strong>
</button>
<a href="http://www.baidu.com/" v-on:click.prevent="go">
百度搜索
</a>
</form>
<form method="post" action="index.html" v-on:submit.prevent="save">
<!--这里的button按钮使用了 .self 修饰符.即代表 button 元素本身被点击时 才会触发 click 事件,并调用 save ,而 button 元素内部的子孙元素均不会触发 button 的click事件-->
<button type="submit" v-on:click.self="go">
<!-- 点击 子孙元素仅会触发 form 的submit 事件,不会触发 button 的事件 -->
<strong>
测试<span>aaas</span>
</strong>
<!-- 会触发函数 go2 和 save -->
<span v-on:click="go2">提交</span>
<!-- 鼠标点击 "表单" 时会触发 button 上的 go 函数和 form 的save 函数 -->
表单
</button>
<!-- .once 修饰符 元素所绑定的事件仅触发1次 -->
<!-- 首次点击时,会触发 go 和 save 函数,再次点击仅触发 save函数. -->
<button type="submit" v-on:click.once="go">
.once修饰符
</button>
</form>
<!-- capture 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理-->
<div v-on:click.capture="doSome" style="border:solid 1px red;width:500px;display:block;">
含.capture修饰符.
<span v-on:click="go" style="margin:5px;display:block;border:dotted 1px blue;">内部事件go</span>
<em>触发顺序:doSome->go</em>
</div>
<div v-on:click="doSome" style="border:solid 1px blue;width:500px;display:block;">
不含.capture修饰符.
<span v-on:click="go" style="margin:5px;display:block;border:dotted 1px blue;">内部事件go</span>
<em>触发顺序:go->doSome</em>
</div>
<div v-on:click="doSome" style="border:solid 1px red;width:500px;display:block;">
含.stop修饰符.
<span v-on:click.stop="go" style="margin:5px;display:block;border:dotted 1px blue;">内部事件.stop</span>
</div>
<div v-on:click="doSome" style="border:solid 1px red;width:500px;display:block;">
不含.stop修饰符.
<span v-on:click="go" style="margin:5px;display:block;border:dotted 1px blue;">内部事件,向上传播</span>
</div>
</div>
</div>
<script src="../../vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
n: 0
},
methods: {
calc: function(e) {
this.n += 1;
console.log("event:", e); //JavaScript MouseEvent
//console.log("element:", e.currentTarget) // <button type="button"> 点我 </button >
},
minus: function() {
this.n -= 1;
},
go: function() {
console.log("go", +new Date());
},
go2: function() {
console.log("go2", +new Date());
},
save: function() {
console.log("save", +new Date());
},
doSome: function() {
console.log("doSome", +new Date());
}
}
})
</script>
</body>
</html>
总结
在本次学习中需要:
1. 掌握vue中事件的绑定使用v-on指令和vm.$on绑定事件
2. 使用vm.$on绑定事件和vm.$emit触发事件
3. 掌握.stop,.prevent,.capture等事件修饰符的使用
勇于尝试(做下习题哦):第二天贴答案
-
制作一个用户注册form表单并绑定表单的submit事件(仅校验有效性)完成注册业务
-
表单中应至少包含用户名,密码,地区和注册
到这里Vue.js系列（七）： Vue的事件处理！各位小伙伴快去试试吧！
最后
-
更多参考精彩博文请看这里：《陈永佳的博客》
-
喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/97749.html
