专栏首页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 条评论
登录 后参与评论

相关文章

  • 小程序实践(十):textarea实现简单的编辑文本界面

    听着music睡
  • Python IO编程

    循环读取文件内容,一般读取文件内容一次读取完,内存是不够的,就要实现一次次少量数据读取

    听着music睡
  • Android项目实战(五十八):Android 保存图片文件到本地,相册/图库查看不到的处理

    将一个图片文件写入到本地目录,然后去相册查看,会查找不到这个图片文件,但是去文件目录下查找,确确实实有该图片文件。

    听着music睡
  • vue指令用法

    指令式带有 v- 前缀的特殊特性 v-text和v-html都属于指令 将数据和dom做关联,当表达式的值改变时,响应式地作用在视图

    达达前端
  • Vue.js 系列教程 1:渲染,指令,事件

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可...

    叙帝利
  • vue的阻止事件冒泡.stop的使用场景

    说人话就是你点击了一个东西,但是同时触发了这个东西所依附的东西,说的比较官方的话就是如果子元素和父级元素触发的是相同事件的时候,当子元素被触发的时候父元素也会被...

    何处锦绣不灰堆
  • 使用liquibase与h2助力单元测试

    liquibase在其官网首页中有一个很明确的定位,那就是Source Control For Your Database,Liquibase记录你的数据库变更...

    Dylan Liu
  • Linux 下修改网卡MAC地址

    #修改HWADDR所在行为MACADDR="XX:XX:XX:XX:XX:XX",其中XX.XX.XX...为你要修改的MAC地址,如下

    授客
  • eclipse导入本地xsd文件(新手慎入)

    eclipse使用xsd文件可以辅助编辑xml文件。如果我们自定义了schema文件,需要导入到xml catalog才可以生效。

    pollyduan
  • 深度学习到底有没有缺陷?这里列满了它做不到的事情

    本文源自一次讨论深度学习缺陷的推文风暴,斯坦福大学的Bharath Ramsundar,在用深度学习进行药物研究的过程中发现,深度学习做不到事情其实有很多,比如...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券