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 @:事 ...
随机推荐
- 【踩坑】.NET 8.0 自定义IExceptionHandler不生效
中间件实现异常处理 在ASP.NET Core里,我们可以使用中间件(Middleware)实现全局的异常处理. 如内置的异常处理中间件 UseExceptionHandler app.UseExce ...
- C#开发一个混合Windows服务和Windows窗体的程序
很多时候,我们希望服务程序可以直接运行,或者可以响应一些参数,这时候,混合Windows服务和Windows窗体的程序就排上用场了.要实现同时支持Windows服务和Windows窗体,需要在启动的第 ...
- 【Azure Developer】一个复制Redis Key到另一个Redis服务的工具(redis_copy_net8)
介绍一个简单的工具,用于将Redis数据从一个redis端点复制到另一个redis端点,基于原始存储库转换为.NET 8:https://github.com/LuBu0505/redis-copy- ...
- 怒肝半月！Python 学习路线+资源大汇总
Python 学习路线 by 鱼皮. 原创不易,请勿抄袭,违者必究! 大家好,我是鱼皮,肝了十天左右的 Python 学习路线终于来了~ 和之前一样,在看路线前,建议大家先通过以下视频了解几个问题: ...
- 为什么StampedLock会导致CPU100%？
StampedLock 是 Java 8 引入的一种高级的锁机制,它位于 java.util.concurrent.locks 包中.与传统的读写锁(ReentrantReadWriteLock)相比 ...
- 学习笔记--Java方法基础
Java方法基础 那么什么是方法呢? public class MethodTest01{ public static void main(String[] args){ // 需求1:编写程序计算 ...
- SUM-ACM,3月24-3-31周报
两场天梯赛和一场atcoder. 主要错误知识点在于字符串的处理和并查集的掌握不够,不懂灵活运用. 第一场pta天梯赛 7-5 6翻了 一道字符串的题,我只拿了14分.我不熟悉一个点,f(i,0,s. ...
- c#写一个WINFORM的多线程操作
以下是一个简单的示例,展示了如何在C# WinForms中创建一个按钮的异步事件,并使用Label控件来显示事件执行的时长. 首先,确保你已经在你的项目中添加了一个Button和一个Label控件.假 ...
- java中的Context
在java编程中,上下文(Context)是指程序运行时的环境和状态的集合.包括了类对象变量方法等运行时的相关数据 在类中,我们可以通过this获取当前类的变量.方法的上下文, 例如getset方法: ...
- 假期小结4hive学习beeline
学习Beeline是连接和管理Hive的一种有效方式.Beeline是一个用于与Hive交互的命令行工具,它支持通过JDBC连接到Hive服务器,并执行查询和管理Hive表等操作. 以下是一些关于Be ...