基本用法

　　监听点击事件

v-on

缩写：@

预期：Function | Inline Statement | Object

参数：event

修饰符：

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用法：

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

示例：

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->

<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->

<button @[event]="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->

<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->

<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->

<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->

<my-component @click.native="onClick"></my-component>

　　

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<div id="app">

			<template v-if="type === 'name'">

				<label> nickname :</label>

				<input placeholder="your username" key="name-input">

			</template>

			<template v-else>

				<label>email:</label>

				<input placeholder="your email" key="email-input">

			</template>

			<button @click="handleToggleClick">change type</button>

			<br>

			点击次数: {{ counter }}

			<button @click= "counter++" > +1</button>

			<button @click= "counter--"> -1</button>

			<button @click="rerest"> 重置</button>

			<br>

			<!-- <ul>

				<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>

			</ul> -->

			<ul>

				<template v-for="book in books">

					<li>书名:{{book.name}}</li>

					<li>作者:{{book.author}}</li>

				</template>

			</ul>

		</div>

		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

		<script>

			var app = new Vue({

				el:'#app',

				data: {

					counter: 0,

					type: 'name',

					books:[

						{name: '富婆秘籍',

						author: 'bx'

						},

						{name: '富婆通讯录',

						author: 'bx'

						},

						{name: '如何让富婆爱上你',

						author: 'bx'

						}]

				},

				methods: {

					handleToggleClick: function() {

						this.type = this.type ==='name'? 'mail': 'name';

					},

					rerest: function () {

						this.counter = 0;

					}

				}

			})

			app.books.push({

				name: '如何让富婆迷恋你',

				author: '净扯淡'

			}),

			// app.books.splice(3,1,{

			// 	name: '如何PUA富婆',

			// 	author: '[法] 奥利给'

			// })

			app.$set(app.books, 3, {

				name: '如何PUA富婆',

				author: '[法] 奥利给'

			})

			// app.books = app.books.filter(function (item) {

			// 	console.log(item);

			// 	return item.name.match(/爱/);

			// })

		</script>

	</body>

</html>

　　

如果不想在事件上带参数就在方法中规定事件的参数

这样设置 就可以在调用时不带括号

		　　　　Before：　　　　　　<button @click= "handleAdd（10）"> + 10</button>
　　　　　　　　　　　　　　After：          <button @click= "handleAdd"> + 10</button>



					handleAdd: function(count) {

						count = 10;

						// this 指向前Vue实例app

						this.counter += count;

				},

　　

修饰符

Vue-方法与事件的更多相关文章

  1. Vue方法与事件

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...

  2. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

  3. Vue 方法与事件处理器

    按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...

  4. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  5. Vue中的事件与常见的问题处理

    Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...

  6. vue教程1-04 事件 v-on:click="函数"

    vue教程1-04 事件 v-on:click="函数"   v-on:click/mouseout/mouseover/dblclick/mousedown..... 实例:为d ...

  7. Vue 实例之事件 操作样式 （文本、事件、属性、表单、条件）指令

    Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...

  8. 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. Vue_(基础)Vue中的事件

    Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...

  10. Kendo UI for jQuery使用教程：方法和事件

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

随机推荐

  1. WIndow Server 2019 服务器 MinIO下载并IIS配置反向代理

    1.官网下载并配置 下载MinIO Serve地址(不需要安装,放在目录就行) https://dl.min.io/server/minio/release/windows-amd64/minio.e ...

  2. 基于Vue+OpenSeaDragon的数字细胞阅片开发

    前端框架: vue+elementui+openseadragon 后端 .net core 5.0 数据库 mysql 目前项目效果如图 在原有的基础上新增了阅片轨迹 图像调节,绘图,截图等功能. ...

  3. 【创龙全国产T3核心板】赋能工业领域新发展

    在工业5.0时代浪潮持续推进并具备确定性的时代背景下,工业领域创新升级的需求日益增长,为满足各种工业环境下的应用需求,面向工业领域,创龙科技推出了基于全志T3处理器的元器件全国产化工业级核心板--SO ...

  4. CentOS7源码安装Python3

    一.先安装python3所依赖的软件包,非常重要(否则可能会出现python3安装成功,却缺少相应的pip) [root@centos src]# yum groupinstall "Dev ...

  5. python rsa-oaep加密示例

    代码: 1 from Crypto.PublicKey import RSA 2 from Crypto.Cipher import PKCS1_OAEP 3 import base64 4 rsa_ ...

  6. 机器学习策略篇：详解如何使用来自不同分布的数据，进行训练和测试（Training and testing on different distributions）

    如何使用来自不同分布的数据,进行训练和测试 深度学习算法对训练数据的胃口很大,当收集到足够多带标签的数据构成训练集时,算法效果最好,这导致很多团队用尽一切办法收集数据,然后把它们堆到训练集里,让训练的 ...

  7. 面试官：Dubbo一次RPC请求经历哪些环节？

    大家好,我是三友~~ 今天继续探秘系列,扒一扒一次RPC请求在Dubbo中经历的核心流程. 本文是基于Dubbo3.x版本进行讲解 一个简单的Demo 这里还是老样子,为了保证文章的完整性和连贯性,方 ...

  8. Vue 数组和对象更新，但视图未更新，背后的故事

    在实际开发中,遇到遍历数组和对象,当property 发生改变时,并没有触发视图的更新今天来浅显的聊聊这背后的故事,有说的不对地方,还望指出! 本人博文地址:https://www.cnblogs.c ...

  9. [rCore学习笔记 09]为内核支持函数调用

    在[[08 内核第一条指令|上一节]]我们使用了编写entry.asm函数中编写了内核的第一条指令,但是我们使用的汇编.这里注意我们仍然是嵌入了这段asm代码到我们的rust代码之中,然后进行编译.但 ...

  10. Android Spingboot 实现SSE通信案例

    SSE SSE(Server-Sent Events)是一种用于实现服务器主动向客户端推送数据的技术,它基于 HTTP 协议,利用了其长连接特性,在客户端与服务器之间建立一条持久化连接,并通过这条连接 ...