vue之监听事件
一、v-on
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
简写形式 用@代替 v-on:
<button v-on:click="counter += 1">Add 1</button> <button @click="counter += 1">Add 1</button> <button v-on:click="greet">Greet</button> //此处需注意,greet()加括号与否均可,如果要传参,当然需要括号。但如果直接在双花括号内获取函数,必须含有括号,即{{ greet() }} <button @click="greet">Greet</button>
点击事件 v-on:click、双击事件v-on:dbclick、鼠标事件v-on:mousemove
二、事件修饰符
Vue.js 为 v-on
提供了事件修饰符。Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。修饰符是由点开头的指令后缀来表示的。使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
.stop
.prevent
.capture
.self
.once
.passive
1、.stop阻止冒泡事件
今天在<li>里加了一个button,结果点击button,触发了li上的点击事件。使用.stop阻止事件冒泡
<ul> <li v-for="(task,index) in list" @click="add(task)" :class="{'complated':task.finished}"> {{task.id}}-{{task.name}} <button @click.stop="deltask(task)">del</button> </li> </ul>
不要忘了自己为了什么前进