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 @:事 ...
随机推荐
- org.springframework.beans.BeanUtils.copyProperties对象赋值的常见问题
org.springframework.beans.BeanUtils.copyProperties对象赋值的常见问题 //codepublic static void copyProperties( ...
- Jmeter自动录制脚本
1.Jmeter配置 1.1新增一个线程组 1.2Jmeter中添加HTTP代理 1.3配置HTTP代理服务器 修改端口 修改Target Cintroller(目标控制器) 修改Grouping(分 ...
- JAVA日期当天0点0分0秒
LocalDateTime LocalDateTime ldt = LocalDateTime.now(); LocalDateTime todayZero = LocalDateTime.of(ld ...
- 15-容器简介与Docker安装
传统企业应用构建 应用被直接部署在操作系统之上,并且操作系统直接安装于硬件之上应用被操作系统绑定 操作系统被硬件绑定 缺点 部署非常慢(启动应用的速度非常慢) 成本非常高(原有服务器的操作系统不支持这 ...
- 开发板测试手册——SPI FLASH 读写、USB WIFI 模块（2）
目录 1.8 SPI FLASH 读写测试 20 1.9 USB 接口读写测试 21 1.10 网络接口测试 23 1.10.1 网络连通测试 23 1.10.2 网络速度测试 25 2 网络静态 I ...
- TI AM62x工业核心板规格书（单/双/四核ARM Cortex-A53 + 单核ARM Cortex-M4F，主频1.4GHz）
1 核心板简介 创龙科技SOM-TL62x是一款基于TI Sitara系列AM62x单/双/四核ARM Cortex-A53 + 单核ARM Cortex-M4F异构多核处理器设计的高性能低功耗工业级 ...
- nicegui 第一次
from nicegui import ui from ex4nicegui.reactive import rxui from ex4nicegui import to_ref,ref_comput ...
- 2024已过半，还没试过在vue3中使用ioc容器吗？
Vue3 已经非常强大和灵活了,为什么还要引入 IOC 容器呢?IOC 容器离不开 Class,那么我们就从 Class 谈起 Class的应用场景 一提起 Class,大家一定会想到这是 Vue 官 ...
- Java 反射获取对象里的值
最近在负责邮件服务,里面会涉及到很多Email模板,这里我使用到了java的模板引擎:jetbrick-template,需要使用Map集合一个个往里面设置值,然后调用模板方法,进行替换.实体类一个个 ...
- SpringBoot获取指定Resource下的文件内容
加入依赖 <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</a ...