vue之事件监听v-on
1.背景
2.简单使用
2.1.做一个简单的点击计数器
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>模拟购买数</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>模拟购买数-普通写法</h2> <button v-on:click="decrement">-</button>
-{{number}}-
<button v-on:click="increment">+</button> <hr>
<h2>模拟购买数-简写</h2>
<button @click="decrement">-</button>
-{{number}}-
<button @click="increment">+</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
increment: function () {
console.log("---执行加一")
this.number++
},
decrement: function () {
console.log("---执行减一")
if (this.number > 1) {
this.number--
} else {
console.log("---在减就没有了")
} } }
})
</script>
</body>
</html>
2.2.v-on参数的秘密
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on参数</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>v-on参数</h2>
<pre>
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
</pre>
<hr>
<h2>默认将原生事件event参数传递进去</h2>
<button @click="decrement">-</button>
<br>
<br>
-{{number}}-
<h2>如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件</h2>
<button @click="increment(2,$event)">+2</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
increment: function (num,event) {
console.log("---执行加"+num)
console.log("---event"+event)
this.number+=num
},
decrement: function (event) {
console.log("---执行减一")
console.log("---event一"+event)
if (this.number > 1) {
this.number--
} else {
console.log("---在减就没有了")
} } }
})
</script>
</body>
</html>
2.3.v-on的修饰符
常用
1.阻止事件传递，嵌套标签中@click.stop
2.阻止默认事件执行@click.prevent
3.回车键触发事件@keyup.enter
4.只执行一次@click.once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on修饰符</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>.stop - 调用 event.stopPropagation()</h2>
<pre>
如果一个div里面有一个button标签，div与button上都有点击事件
有事我们希望，点击div就只执行div的事件方法
点击button就只执行button的事件方法，代码如下
</pre>
<hr>
<h3>1.不使用了@click.stop</h3>
<div @click="f1">
div内容1
<button @click="f2">按钮1</button>
</div>
<hr>
<h3>2.使用了@click.stop</h3>
<div @click="f1">
div内容2
<button @click.stop="f2">按钮2</button>
</div>
<hr>
<hr>
<h2>.prevent - 阻止默认事件执行调用 event.preventDefault(</h2>
<pre>
比如我们在form表单中，当用户点击提交按钮时，
默认会请求到action="/baidu" 中去,
如果你不想去执行默认的可以使用 .event阻止默认行为
</pre> <h3>1.不使用了@click.prevent</h3>
<form action="/hello">
<input type="submit" value="默认提交到/hello" @click="f3">
</form> <h3>2.使用了@click.prevent</h3>
<form action="/hello">
<input type="submit" value="不会提交到/hello" @click.prevent="f4">
</form>
<hr>
<h2>.@keyup.enter 按回车键触发</h2>
姓名:<input @keyup.enter="f3" type="text"/>
<hr> <h3> @click.once - 只触发一次回调</h3>
<button @click.once="f4">按钮</button> </div>
<script>
const app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
f1() {
console.log("-------f1---div---")
},
f2() {
console.log("-------f2---button---")
},
f3() {
console.log("-------f3------")
},
f4() {
console.log("-------f4------")
} }
})
</script>
</body>
</html>
完美！
vue之事件监听v-on的更多相关文章
- vue的事件监听
<div id="app"> <button type="button" @click="btnClick(a,$event)&qu ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- Vue学习笔记（二）动态绑定、计算属性和事件监听
目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...
- Vue 事件监听
事件监听 v-on 使用v-on进行事件绑定监听,回调函数写在methods中.可以使用@的这种简写形式来代替v-on,当事件源无参数传递时,可省略括号. 语法如下所示: <button @:事 ...
随机推荐
- 洛谷 P1226 快速幂
题目链接:快速幂 思路 简单快速幂模板.a ^ 17 = (a ^ 2) ^ 8 * a,此时pow()中的y就可以视为17 -> 8(y >>= 1),pow()中的x就是底数a ...
- AWX+gitlab
目录 AWX+gitlab 1. Awx配置 1.1 添加机构 1.2 添加团队 1.3 添加主机 1.4 测试主机连通性 2. 对接gitlab 2.1 添加凭证 2.2 添加项目 2.3 上传pl ...
- 在Xcode编写我们的quick help
程序环境 Xcode 13.2.1 "写代码要经常写注释."虽然很多人不以为然,但是在使用Xcode的时候,我们在写注释的时候稍微注意一下格式的话,Xcode会给我们带来额外的正反 ...
- .net core 3.1 + 动态执行C#
1.使用 using Microsoft.CodeAnalysis.CSharp.Scripting;using Microsoft.CodeAnalysis.Scripting; 2.定义 Rosl ...
- DVT：华为提出动态级联Vision Transformer，性能杠杠的 | NeurIPS 2021
论文主要处理Vision Transformer中的性能问题,采用推理速度不同的级联模型进行速度优化,搭配层级间的特征复用和自注意力关系复用来提升准确率.从实验结果来看,性能提升不错 来源:晓飞的算法 ...
- Unity中创建多边形并计算面积
问题背景: 我这边最近需要实现动态去画多边形(不规则的),类似于高德地图中那种面积测量工具一般. 方案: "割耳"算法实现三角化平面. 具体实现: 割耳算法类: /* ****** ...
- SpringBoot 校验post请求参数
导读 前后端分离项目中,前端往后端传值时,后端都要做参数格式校验,比如校验数字最大值.最小值.是否允许为空.日期格式等等. 添加依赖 <!-- 参数校验 --> <dependenc ...
- yb课堂 订单列表开发，完结 《四十五》
Order.vue <template> <div class="main"> <!--订单列表--> <div class=" ...
- Mac制作U盘启动项
导读 鄙人刚买回来的电脑,自带系统版本:10.14.5(19款的),有一天,提示系统升级,升到了10.15.4,从此落下了后遗症,mac系统密码输入完之后,读条读到2/3的时候,会黑屏闪一下,百思不得 ...
- 重磅来袭!MoneyPrinterPlus一键发布短视频到视频号,抖音,快手,小红书上线了
MoneyPrinterPlus开源有一段时间了,已经实现了批量短视频混剪,一键生成短视频等功能. 有些小伙伴说了,我批量生成的短视频能不能一键上传到视频号,抖音,快手,小红书这些视频平台呢?答案是必 ...