专栏首页Android干货vue学习笔记-事件监听

vue学习笔记-事件监听

最简单的点击事件

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

点击button一次。触发时运行一些 JavaScript 代码 即counter+1 并更新ui 

v-on:click执行一个方法的方式:

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

内联处理器中的方法

除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js学习笔记——事件监听

    在 data 中定义一个 myMovie 变量,给它一个默认值‘阿凡达’,用于在页面中显示。

    德顺
  • vue学习笔记9-监听属性-watch

    这样就可以实现绑定 而且他后面也有很多功能,比如.lazy,惰性更新,只有焦点离开才会更新

    雪地二货
  • vue学习笔记8-监听属性-watch

    如果想要这两个属性相互绑定,当然也可以给这两个标签添加事件响应属性。 也可以使用watch属性,来监听kilo和meter这两个属性。

    雪地二货
  • Vue的watch监听事件

    Dream城堡
  • vue事件监听机制

    $emit 抛出后活等着 $on ,如果监听到了则阻塞执行; 如果为监听到或者未绑定,则会继续运行。

    Daotin
  • activiti学习笔记(六) 监听器

    activiti全局监听器 全局监听器主要使用的场景就是监控这个流程的启动和结束。流程开始的时候可以监控,流程结束的时候也可以监控 监听器的接口 public ...

    cfs
  • Flash/Flex学习笔记(35):如何正确监听Stage对象的事件

    如果想在一个自定义类中注册对stage对象的监听事件,然后在另一个文档类中使用该类的实例(或在fla的时间轴上使用该类的实例),你会很郁闷的发现:在构造函数中始...

    菩提树下的杨过
  • vue学习笔记5-事件绑定-v-on

    效果也相同。 而且vue也封装了好多方法,可以用这些方法简介开发 例如@keyup.enter="a",如果按下键盘的时候按下的是回车,那么就可以直接触发a方法...

    雪地二货
  • Vue学习笔记之Vue组件

    vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

    Jetpropelledsnake21
  • clickAwayHook Vue 监听元素外事件 hook

    copy_left
  • 百度前端实习岗

    牛客网
  • 8 道高频出现的 Vue 面试题及答案

    MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

    夜尽天明
  • Android开发学习——事件监听方式

    大部分时候,事件处理器都没有什么利用价值(可利用代码通常都被抽象成了业务逻辑方法),因此大部分事件器更合适,实际上,这种形式是目前是最广泛的事件监听器形式。上面...

    Max超
  • JavaScript学习笔记012-DOM2级事件监听-代理0冒泡-捕获模式

    Bootstrap,Foundation,Semantic UI,Angular,React Redux,Vue?

    Mr. 柳上原
  • 细节满满的四轮字节跳动面经

    面试官又问了Object.defineProperty除了 set get外还有什么属性,我回答了configurable enumerable。vue-rou...

    落落落洛克
  • vue学习笔记10-组件

    之后就可以在html中<tagName></tagName>来使用它。 自定义组件也分为全局和局部两种,全局可以在任何实例中使用,而局部只有注册后才能使用。 全...

    雪地二货
  • activiti学习笔记(三) 监听生命周期

    activiti监听生命周期 activiti生命周期的作用 生命周期的作用是在构建processEngine实例时候或者关闭的时候调用对应处理方法,比如我在启...

    cfs
  • Vue[0x03] - Vue基础实践

    抓重点讲吧,最开始可追溯的版本号是0.6.0这个,但是正式对外发布的版本是在2014年1月24日发布的0.8.0。后面就是两个打头的里程碑,一个是1.x.x,一...

    璀错
  • [Vue 牛刀小试]:第九章 - 组件基础再探(data、props)

      在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件。不知道你是否记得,在上一章中,我们提到组件是一个可...

    程序员宇说

扫码关注云+社区

领取腾讯云代金券