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>

 

posted @ 2019-03-12 13:55  居老师的狗子  阅读(3037)  评论(0编辑  收藏  举报