<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 安装并启动 ...
随机推荐
- 【scikit-learn基础】--『数据加载』之玩具数据集
机器学习的第一步是准备数据,好的数据能帮助我们加深对机器学习算法的理解. 不管是在学习还是实际工作中,准备数据永远是一个枯燥乏味的步骤.scikit-learn库显然看到了这个痛点,才在它的数据加载子 ...
- python循环语句（二）
Python for循环可以遍历任何序列的项目,如一个列表或者一个字符串. 知识点:for循环的语法格式如下: for iterating_var in sequence: statements(s) ...
- 基于DotNetty实现自动发布 - 自动检测代码变化
前言 很抱歉没有实现上一篇的目标:一键发布,因为工作量超出了预期,本次只实现了 Git 代码变化检测 已完成的功能 解决方案的项目发现与配置 首次发布需要手动处理 自动检测代码变化并解析出待发布的文件 ...
- [清华集训2017] Hello World!
Hello world! 题目背景 不远的一年前,小 V 还是一名清华集训的选手,坐在机房里为他已如风中残烛的OI 生涯做最后的挣扎.而如今,他已成为了一名光荣的出题人.他感到非常激动,不禁感叹道: ...
- SpringBoot-Validate优雅的实现参数校验，详细示例~
1.是什么? 它简化了 Java Bean Validation 的集成.Java Bean Validation 通过 JSR 380,也称为 Bean Validation 2.0,是一种标准化的 ...
- 【.NET】控制台应用程序的各种交互玩法
老周是一个不喜欢做界面的码农,所以很多时候能用控制台交互就用控制台交互,既方便又占资源少.有大伙伴可能会说,控制台全靠打字,不好交互.那不一定的,像一些选项类的交互,可以用键盘按键(如方向键),可比用 ...
- Educational Codeforces Round 26 Problem C
C. Two Seals time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- Python代码中的偏函数
技术背景 在数学中我们都学过偏导数\(\frac{\partial f(x,y)}{\partial x}\),而这里我们提到的偏函数,指的是\(f(y)(x)\).也就是说,在代码实现的过程中,虽然 ...
- 【Python】【OpenCV】凸轮廓和Douglas-Peucker算法
针对遇到的各种复杂形状的主体,大多情况下,我们可以求得一个近似的多边形来简化视觉图像处理,因为多边形是由直线组成的,这样就可以准确的划分区域来便捷后续的操作. cv2.arcLength() Meth ...
- ElasticSearch之cat templates API
命令样例如下: curl -X GET "https://localhost:9200/_cat/templates?v=true&pretty" --cacert $ES ...