代码结构

一、     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、事件监听>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Go笔记(2)-5种运算符总结

    运算符 (1)算术运算符 (2)关系运算符 (3)逻辑运算符 (4)位运算符 (5)赋值运算符

  2. [ABC283Ex] Popcount Sum

    Problem Statement Find the sum of popcounts of all integers between $1$ and $N$, inclusive, such tha ...

  3. Filter拦截问题

    关于Filter拦截问题 刚开始我创建了个servlet项目一直拦截不成功 首先是因为导包的问题      import javax.servlet.*; 必须是这个包才有 第一个这个Javax.se ...

  4. LeetCode456：132模式（单调栈）

    解题思路:根据题意,我们首先首先要找到所有的极大值点,同时记录当前极大值点的左边的最小值.遍历所有点,看是否能够满足132条件.虽然记录极大值点的地方可以优化,减小比较的次数,但是由于我们不知道极大值 ...

  5. Windows 激活系统提示0x80072F8F错误代码的解决方法（刷新你的认知）

    Server2008.Server2012.Server2016.Win7.Win10都适用 https://blog.csdn.net/happyxjbf/article/details/10591 ...

  6. 谁再说学不会 MySQL 数据库，就把这个给他扔过去！

    大家好,我是民工哥. 又是新的一年奋斗路的开启,相信有不少人农历新年之后,肯定会有所变动(跳槽加薪少不了).所以,我把往期推送过的MySQL技术文章做了一个相关的整理,基础不好的可以从最基础的学习一遍 ...

  7. 初探 Linux Cgroups：资源控制的奇妙世界

    Cgroups 是 linux 内核提供的功能,由于牵涉的概念比较多,所以不太容易理解.本文试图通过简单的描述和 Demo 帮助大家理解 Cgroups . 如果你对云原生技术充满好奇,想要深入了解更 ...

  8. android ProgressBar样式

    实现进度条由浅黄(#ffff33)到深黄色(#ff6600)的渐变样式. 与进度条自动从0加载到99,进度条每次加1 android:max:进度条的最大值. android:progressDraw ...

  9. 2023-09-05：请用go语言编写。一个图像有n个像素点，存储在一个长度为n的数组arr里， 每个像素点的取值范围[0,s]的整数， 请你给图像每个像素点值加上一个整数k（可以是负数）， 像素值会

    2023-09-05:请用go语言编写.一个图像有n个像素点,存储在一个长度为n的数组arr里, 每个像素点的取值范围[0,s]的整数, 请你给图像每个像素点值加上一个整数k(可以是负数), 像素值会 ...

  10. Unreal学习笔记1-打印输出

    1. 概述 相比各种打断点调试的办法,还是更习惯使用打印输出来进行调试. 2. 详论 2.1. 代码 这里写了三个函数:分别是输出到屏幕,输出到警告日志,输出错误日志. Output.h: #prag ...