<vue 基础知识 5、事件监听>
代码结构
一、 v-on基本使用
1、效果
按钮点击一下数字增加1
2、代码
01-v-on基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-on基本使用</title>
</head>
<body> <div id="app">
<h2>{{counter}}</h2>
<button v-on:click="counter++">按钮1</button>
<button v-on:click="btnClick()">按钮2</button>
<!--简写-->
<button @click="counter++">按钮3</button>
<button @click="btnClick()">按钮4</button>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick() {
this.counter++
}
}
})
</script> </body>
</html>
二、 v-on参数使用
1、 效果
函数不传入参数、传入参数和event事件以及双击事件展示
2、代码
02-v-on参数问题.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-on参数问题</title>
</head>
<body> <div id="app">
<h2>点击次数: {{counter}}</h2>
<!-- 如果方法有参数-->
<!--调用时不传入参数,那么参数为undefined-->
<button @click="btnClick1()">按钮1</button> <!--如果方法有参数,并且希望传入event-->
<button @click="btnClick2(10, $event)">按钮2</button> <!--双击事件-->
<button v-on:dblclick="btnClick3()">按钮3</button></br>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick1(payload) {
this.counter++
console.log('按钮1被点击', payload);
},
btnClick2(num, event) {
this.counter++
console.log('按钮2被点击', num, event);
}
,
btnClick3() {
this.counter++
console.log('按钮3被双击' );
}
}
})
</script> </body>
</html>
三、03-v-on修饰符
1、效果
（1）带了stop修饰符将阻止向上调用触发事件
（2）prevent修饰符阻止了跳转到百度网站的默认行为，而回掉了添加的函数
（3）once修饰符只调用一次回调函数，再次点击就触发回调函数
（4）点击回车后触发回调函数
2、 代码
03-v-on修饰符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-on修饰符</title>
</head>
<body> <div id="app">
----------修饰符stop 停止冒泡------------
<div @click="divClick">
<button @click="btnClick">不带stop修饰符按钮</button>
</div> <div @click="divClick">
<button @click.stop="btnClick">带stop修饰符按钮</button>
</div> ----------修饰符prevent 组织默认行为------
<div>
<a href="http://www.baidu.com" @click="aClick">百度一下</a>
</div>
<div>
<a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>
</div> -----------修饰符once 只触发一次回调函数---
<div>
<button @click.once="btnClick">once按钮</button>
</div> -----------点击回车时才触发回调-----------
<div>
<input type="text" @keyup.enter="onEnter">
</div> <div>
<input type="text" @keyup.13="onEnter">
</div>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: { },
methods: {
divClick() {
console.log('divClick');
},
btnClick() {
console.log('btnClick');
},
aClick() {
console.log('aClick');
},
onEnter() {
console.log('enter被点击');
}
}
})
</script> </body>
</html>
<vue 基础知识 5、事件监听>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- Visual Studio安装教程
一.官网下载 地址:下载 Visual Studio Tools - 免费安装 Windows.Mac.Linux (microsoft.com) 二.安装 1.双击开始安装 2.等待一段时间,打开配 ...
- 一次elasticsearch 查询瞬间超时案例分析
大家好,我是蓝胖子,有段时间没有做性能分析案例讲解了,正好前两天碰到一个性能问题,今天就来对它探讨探讨. 问题背景 在晚上9点左右,刚从外面逛街回到家,就接到了电话报警(幸好前不久刚好把电话报警机制加 ...
- 【开源项目推荐】通用SQL数据血缘分析工具——Sqllineage
大家好,我是独孤风,从本周开始,争取每周为大家带来一个优秀的开源项目推荐. 开源项目不仅促进了技术的发展和普及,还为全球范围内的开发者和用户社区建立了一个共享知识.协作和创新的平台.站在巨人的肩膀上才 ...
- JSON多层嵌套复杂结构数据扁平化处理转为行列数据
背景 公司的中台产品,需要对外部API接口返回的JSON数据进行采集入湖,有时候外部API接口返回的JSON数据层级嵌套比较深,举个栗子: 上述的JSON数据中,最外层为请求返回对象,data里面包含 ...
- SpringCore完整学习教程5，入门级别
本章从第6章开始 6. JSON Spring Boot提供了三个JSON映射库的集成: Gson Jackson JSON-B Jackson是首选的和默认的库. 6.1. Jackson 为Jac ...
- KR4-KP4
serdes测试中经常遇到KR4 和KP4, KR4指的是FEC 528 514对应25X4的100G KP4对应FEC 544 514,56/100x4 的200/400G链路 KP4应用比较广泛, ...
- 又有新框架上线了，测试、AI 通通有「GitHub 热点速览」
本周热点之一可能就是 Apple 刚开源便获得 8k+ star 的机器学习框架 mlx,顺带官方开源的 mlx-example(示例仓)也在热门榜上有一席之位,据说它已经跑通了大模型 Llama 7 ...
- 基于python人脸识别考勤系统（语音播报）
介绍: 本项目是大二寒假在家没事写的,一直没有时间讲本项目分享出来,现在有时间了哈.那就让我简单的将项目介绍一下吧.好了废话不多说了,直接上图 初始化界面: 可以看到所有的功能都展现在了左边的功能栏中 ...
- SpringBoot整合阿里云OSS
1.创建一个service_ossspringboot项目 2.导入相关依赖 ...其他的依赖大家自行导入 <!-- 阿里云oss依赖 --> <dependency> < ...
- LeetCode331：验证二叉树的前序序列化（递归）
解题思路:把所有元素存成数组,设置一个全局下标next,表示当前节点如果要继续遍历应当从数组的哪个位置开始,然后从下标 0 开始DFS.如果DFS返回真并且next下标等于数组的长度,说明元素已经全部 ...