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 @:事 ...
随机推荐
- RequestBodyAdvice和注解方式进行统一参数处理demo
RequestBodyAdvice和注解方式进行统一参数处理demo @Target({ ElementType.METHOD, ElementType.TYPE }) @Retention(Rete ...
- ZYNQ：PetaLinux工程更新HDF文件的脚本
PetaLinux工程更新HDF文件的脚本 参考:PetaLinux工程更新HDF文件的脚本 工程师可能同时使用多个Vivado工程,以便测试不同的硬件配置.如果能够让一个PetaLinux工程支持多 ...
- ARM GIC 系列文章学习（转）
原文来自:骏的世界 ARM GIC(一) cortex-A 处理器中断简介 对于ARM的处理器,中断给处理器提供了触觉,使处理器能够感知到外界的变化,从而实时的处理.本系列博文,是以ARM corte ...
- 基于RK3588的8K视频解码显示案例分享！引领超高清工业视频时代
8K.4K.2K显示对比 2K分辨率:也称为全高清(FULL HD),它具有1920 x 1080像素的分辨率.这是目前大多数消费者电视和电脑显示器的标准分辨率,可以提供良好的图像质量. 4K分辨率: ...
- 【Mysql】 MysqlDump导表结构或数据
mysqldump只导出表结构或只导出数据的实现方法 语法: 默认不带参数的导出,导出文本内容大概如下:创建数据库判断语句-删除表-创建表-锁表-禁用索引-插入数据-启用索引-解锁表. Usage: ...
- ubuntu16.04 安装 eclips c/c++
前言 最近需要在ubuntu16上使用eclips编译c,尝试了apt安装和官网最新包安装甚至应用商店安装,效果都不太理想,现在把我的安装方法记录一下. 正文 !!!前提,已经自己配置好了java8的 ...
- Maven的依赖详解和打包方式
设置maven maven下载与安装教程: https://blog.csdn.net/YOL888666/article/details/122008374 1. 在File->setting ...
- yb课堂 核心数据库表字段设计和测试数据准备 《一》
设计对应的表字段(统一使用Innodb引擎,mysql5.7) video_banner video chapter episode video_order user 数据库脚本 CREATE TAB ...
- Mac 设置多个版本JDK
控制台: p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: ...
- [oeasy]python0135_python_语义分析_ast_抽象语法树_abstract_syntax_tree
语义分析_抽象语法树_反汇编 回忆 上次回顾了一下历史 python 是如何从无到有的 看到 Guido 长期的坚持和努力 添加图片注释,不超过 140 字(可选) python究竟是 ...