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>

秒客网

vue之监听事件

相关文章