<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 安装并启动 ...
随机推荐
- 运行tomcat之后报一个："Address localhost:1099 is already in use"错误
一.解决方案 1.错误原因 "地址 localhost:1099 已在使用中",是1099程序被占用,把1099程序后台停止掉即可. 2.解决方案 1.快捷键win+R打开CMD运 ...
- RabbitMQ入门到进阶
1.MQ简介 MQ 全称为 Message Queue,是在消息的传输过程中保存消息的容器.多用于分布式系统 之间进行通信. 2.为什么要用 MQ 1.流量消峰 没使用MQ 使用了MQ 2.应用解耦 ...
- .NET周刊【12月第1期 2023-12-06】
国内文章 .NET 与 OpenEuler 共展翅,昇腾九万里 https://www.cnblogs.com/shanyou/p/17858385.html 本文介绍了openEuler操作系统,它 ...
- 数字孪生结合GIS会给矿业带来怎样的改变
数字孪生技术和GIS的结合为矿业带来了革命性的改变.矿业作为重要的经济支柱,其发展与资源的开采.生产过程的管理密切相关.通过数字孪生和GIS的融合,矿业行业可以实现更高效.可持续的运营和管理,带来许多 ...
- navicat连接服务器mysql
navicat连接服务器mysql 第一步:配置防火墙 连接服务器的mysql数据库,我们首先需要在服务器上放行3306端口(MySQL服务对应的端口),进入服务器管理页面防火墙,点击添加规则,放行3 ...
- uniapp-welive仿微信/抖音直播带货|uni-app+vue3+pinia短视频直播商城
基于uniapp+vue3+uv-ui跨端H5+小程序+App短视频+直播带货商城Uniapp-WeLive. uni-welive一款全新基于uniapp+vue3+pinia+vk-uview等技 ...
- Python——Html（HEAD头部）
HTML中HEAD头部设置(了解) 在HTML中,<head> 元素是文档的头部部分,通常包含了一些关于文档的元信息和链接到外部资源的标签.以下是一些常见的 <head> 元素 ...
- 秒懂ajax轮询、long poll 、websocket
ajax轮询 场景再现: 客户端:啦啦啦,有没有新信息(Request) 服务端:没有(Response) 客户端:啦啦啦,有没有新信息(Request) 服务端:没有..(Response) 客户端 ...
- 微信小程序中的数组有许多常用的方法和用法
声明和初始化一个数组: var array = []; // 声明一个空数组 var array = [1, 2, 3]; // 声明并初始化一个有元素的数组 获取数组长度: var length = ...
- SQLite3使用笔记(2)——插入
目录 1. 论述 2. 总结 1. 论述 如同上一篇文章SQLite3使用笔记(1)--查询所述,使用SQLite进行查询操作同样有两种方式.对于比较简单的表格插入,使用sqlite3_exec()接 ...