<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 安装并启动 ...
随机推荐
- Aiganize组局小程序开发手册
1. 开发阶段概述: 第一阶段: 针对组局和参局的产品功能落地完善小程序, 修改前端界面,去除冗余, 完善数据库设计 完善组局参局的功能 让每个用户能参与组局大厅的组局 让用户能申请为组局者发起组局, ...
- 手把手教你搭建 Ceph＋JuiceFS
Ceph 提供了对象存储,可作为存储引擎在 JuiceFS 中使用.这一组合非常适合云计算.大数据分析和机器学习等数据密集型应用场景. 在日常部署中可直接通过 Ceph RADOS 配合 JuiceF ...
- vertx 的http服务表单提交与mysql验证
1.依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/ ...
- 后端程序员必会的前端知识-02：JavaScript
第二章. Javascript 它是一种脚本语言,可以用来更改页面内容,控制多媒体,制作图像.动画等等 例子 修改页面内容 js 代码位置 <script> // js 代码 </s ...
- MySQL搭建主从集群详细步骤~
一. Docker安装MySQL搭建主从 docker run [OPTIONS] IMAGE [COMMAND] [ARG...] docker run -p 3306:3306 很多 -d --n ...
- 【类型转换】使用c#实现简易的类型转换(Emit，Expression，反射)
引言 哈喽.大家好,好久不见,最近遇到了一个场景,就是在FrameWork的asp.net mvc中,有个系统里面使用的是EntityFramework的框架,在这个框架里,提供了一个SqlQuery ...
- Vue3节流指令封装
节流指令 import { ObjectDirective } from 'vue' interface ThrottleEl extends HTMLElement { throttleEvent: ...
- BeanCurrentlyInCreationException解决当前容器创建异常、循环依赖问题
BeanCurrentlyInCreationException解决当前容器创建异常.循环依赖问题 一.什么是循环依赖呢? 类A依赖类B,类B也依赖类A,这种情况就会出现循环依赖. Bean A → ...
- spring自定义session分布式session
spring实现自定义session.springboot实现自定义session.自定义sessionid的key.value.实现分布式会话 一.原始方案 自定义生成sessionid的值 修改t ...
- 如何从零开始实现TDOA技术的 UWB 精确定位系统(4)
这是一个系列文章<如何从零开始实现TDOA技术的 UWB 精确定位系统>第4部分. 重要提示(劝退说明): Q:做这个定位系统需要基础么?A:文章不是写给小白看的,需要有电子技术和软件编程 ...