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 @:事 ...
随机推荐
- fs.1.10 ON rockeylinux8 dockerfile模式
概述 freeswitch是一款简单好用的VOIP开源软交换平台. rockeylinux8 docker上编译安装fs.1.10的流程记录,本文使用dockerfile模式. 环境 docker e ...
- ssm框架使springmvc放行资源（java配置类）
在springmvc中,如果配置了拦截所有请求交给springmvc处理,会出现一些静态web资源加载不出来的情况,或者想放行指定web资源可以通过修改通过修改配置达到相应目的,这里使用覆写WebMv ...
- java+SpringCloud开发的性能和环保问题
对于大部分商业应用开发程序员而言,使用java+spring是一件幸福的事情. 一般情况下,我们使用cloud开发不是那么重要.精密的应用,这些应用包括例如大型的商业交易,社区等等. 因为这些应用天然 ...
- 认识.NET 日志系统
认识.NET 日志系统 基本概念 日志级别:Trace<Debug<Information<Waring<Error<Critical 日志提供者(LoggingProv ...
- Oracle常用统计
测试, 这是测消息 1.按天 select to_char(t.STARTDATE+15/24, 'YYYY-MM-DD') as 天,sum(1) as 数量from HOLIDAY tgroup ...
- [python] Python日志记录库loguru使用指北
Loguru是一个功能强大且易于使用的开源Python日志记录库.它建立在Python标准库中的logging模块之上,并提供了更加简洁直观.功能丰富的接口.Logging模块的使用见:Python日 ...
- 【ClickHouse】0：clickhouse学习4之表相关操作
Clickhouse对表操作分为四大类:增删查改(INSERT,DROP,SELECT,ALTER). 增,删,查比较简单,改最复杂.那具体有哪些改的操作呢?如下清单: ALTER ALTER TAB ...
- The Beauty of Physics
绪言/1 学物理的人用不着对物理方程的意义操心,只要关心物理方程的美就够了. --狄拉克 此曲只应天上有--开普勒的和谐宇宙/11 天体的运动只不过是某种永恒的复调音乐而已,要用才智而不是耳朵来倾听. ...
- SpringBoot 日志文件 logback-spring.xml
日志文件 将logback-spring.xml配置文件,放到:/src/main/resources中 <?xml version="1.0" encoding=" ...
- java将list中某个元素放在首位
java将list中某个元素放在首位 1 List<Example> example = exampleRepository.list(); 2 3 //将list里的某个字符串默认排列在 ...