<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 安装并启动 ...
随机推荐
- AgileConfig 1.8.0 已适配 .NET8
Hello 大家好.本月圈子里最大的事莫过于 .NET8 正式 release.群友们都在适配 .NET8.抽个周末我也把 AgileConfig 升级到了 .NET8.下面把升级的过程简单记录一下, ...
- 吉特日化MES & 实施Windows Server 远程登录的问题
Windows远程登录提醒:由于没有远程桌面授权服务器可以提供许可证,远程会话连接已断开.请跟服务器管理员联系. 由于没有远程桌面授权服务器可以提供许可证,远程会话连接已断开.请跟服务器管理员联系. ...
- [THUPC 2023 初赛] 快速 LCM 变换
题目描述 小 I 今天学习了快速最小公倍数变换(Fast Least-Common-Multiple Transform, FLT),于是他想考考你. 给定一个长度为 \(n\) 的正整数序列 \(r ...
- 安装华企盾DSC加密软件，USB、银行key等驱动加载不了常见处理方法
1.首先打开高级客户端查看客户端的权限是否正确 2.将USB设置成放行 3.修改USB管控的注册表 4.安装6.6.0高版本,并添加便捷式设备的注册表改为1见下图 5.添加flag000如正常则把相关 ...
- 使用kubeadm在Centos8上部署kubernetes1.18
// 查看系统版本 cat /etc/centos-release CentOS Linux release 8.1.1911 (Core) // 如果系统环境为8.0(云服务器默认最大安装环境为8. ...
- 【JMM内存模型-4】JMM内存模型之CPU缓存策略-jmmcpu4
title: [JMM内存模型-4]JMM内存模型之CPU缓存策略 date: 2021-11-17 13:27:48.139 updated: 2021-12-26 17:43:10.442 url ...
- Python——第二章：列表的增、删、改、查
列表的添加 .append() lst = [] # 向列表末尾添加内容 # append() 追加 lst.append("张绍刚") lst.append("赵本山& ...
- Centos7——防火墙(Firewall)命令
centos防火墙根据系统大致有2种,一种是centos6时代的iptables:一种是centos7时代的firewalld: CentOS 7中防火墙是一个非常的强大的功能,在CentOS 6.5 ...
- $router.push跳转页面传参
$router.push传参与收参 //传参 <el-button type="text" @click="$router.push('/games/Match?i ...
- 获取yml自定义内容的方式
yml内容 yml: login: name: zhangsan age: 18 pass: 123456 方式一: 创建实体类 @Configuration @ConfigurationProper ...