v-on方法参数

情况一：事件处理方法没有参数。v-on为事件绑定方法时小括号可以省略，也可以不省略。

情况二：事件处理方法需要参数，且v-on绑定方法时传递了相应的参数。这种情况是最常见的。

情况三：事件处理方法本身需要参数，但v-on绑定方法时省略了小括号，这时Vue会默认将浏览器生成的event事件对象作为第一个参数传入方法。

情况四：事件处理方法需要event对象，同时又需要其他参数，可以手动获取浏览器参数的event对象$event传入方法。

<div id="app"><!--事件调用的方法没有参数--><button @click="btn1Click()">按钮1</button><button @click="btn1Click">按钮1</button><!--方法需要参考，且v-on绑定方法时传递了参数--><button @click="btn2Click(123)">按钮2</button><!--方法本身需要参数，但v-on绑定方法时省略了小括号，这时Vue会默认将浏览器生成的event事件对象作为第一个参数传入到方法--><button @click="btn3Click">按钮3</button><!--方法需要event对象，同时又需要其他参数，手动获取浏览器参数的event对象：$event--><button @click="btn4Click(123, $event)">按钮4</button>
</div><script>const app = new Vue({el: '#app',methods: {btn1Click(){console.log('btn1Click')},btn2Click(abc){console.log('btn2Click', abc)},btn3Click(event){console.log('btn3Click', event)},btn4Click(abc, event){console.log('btn4Click', abc, event)}}})
</script>

v-on修饰符

.stop：阻止事件冒泡。在下面这个例子中，点击<button>，只会触发btnClick，而不会触发divClick，因为<button>的click点击事件被.stop修饰符阻止向父元素传递了。

<div @click="divClick">abc<button @click.stop="btnClick">按钮</button>
</div>

.prevent：阻止默认事件。在下面这个例子中，点击<input type="submit">，不会跳转到<form>绑定的action中，因为<input>的click点击的默认事件被.prevent修饰符阻止了。

<form action="https://www.baidu.com/"><input type="submit" value="提交" @click.prevent="submitClick">
</form>

.{keyCode|keyAlias}：在键盘事件中只监听某个特定的键，可以是键码，也可以是键的别名。在下面这个例子中，<input>只监听回车键的释放按键。

<input type="text" @keyup.13="keyUp">
<input type="text" @keyup.enter="keyUp">

.once：事件只触发一次。

.native：监听组件元素的原生事件。在下面这个例子中，比如<back-top>是一个组件元素（这个在后面讲到组件化开发的时候会说），click是一个原生事件而非自定义事件，因此需要加上.native修饰符才能监听到。

<back-top @click.native="backClick"/>

案例-点击切换选中目标

这个案例结合了前面说的v-for、v-bind、v-on：

v-for动态渲染数组movies，遍历数组元素值和下标
v-bind为v-for的每个数组项动态绑定class，具有active类的条件是当前项被选中，即当前项的index等于currentIndex
v-on为v-for的每个数组项绑定click事件处理方法choose，并传入index，将其设置为当前选中项currentIndex

<div id="app"><ul><li v-for="(m, index) in movies" v-on:click="choose(index)" v-bind:class="{active: index===currentIndex}">{{m}}</li></ul>
</div><script>const app = new Vue({el: '#app',data: {movies: ['星际穿越', '大话西游', '少年派的奇幻漂流', '盗梦空间'],currentIndex: 0},methods: {choose: function (index) {//记录当前状态this.currentIndex = index}}})
</script><style>.active{color: red;}
</style>

注：用一个类似currentIndex的变量记录当前状态是一种常见的做法。

【Vue学习笔记_05】v-on事件监听相关推荐

webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
vue用户行为收集_vue 实现移动端键盘搜索事件监听
1.首先注意,input的type="serch" 2.监听keypress事件 (1)KeyDown.KeyUp 事件这些事件是当一个对象具有焦点时按下 ( KeyDown ) ...
第三篇、文本框事件监听
文章目录前言一.文本框事件监听二.代码示例 1.文本框事件监听总结前言上一篇我们共同学习了对按钮事件的监听,本篇我们将共同学习对文本框的事件监听一.文本框事件监听本篇内容我们将实现对文 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
vue学习记录-05 事件监听
vue学习记录-05 事件监听这篇文章是根据codewhy老师在b站的视频进行的学习记录文章目录 vue学习记录-05 事件监听一.v-on的基本使用二.v-on的参数问题 1.方法不需要参数 ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
后端小白程序员的Vue学习笔记
文章目录写在前面 Vue 一.什么是 Vue 二.相关技术栈前端后端关于前后端分离三.入门使用 3.1.Hello,Vue 3.2.Mustache 语法 3.3.插值操作 3.4.属性绑定 ...

【Vue学习笔记_05】v-on事件监听

【Vue学习笔记_05】v-on事件监听

v-on方法参数

v-on修饰符

案例-点击切换选中目标

【Vue学习笔记_05】v-on事件监听相关推荐

最新文章

热门文章