Vue事件修饰符(四).native .once

简介

        Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形式绑定事件监听器,并且可以使用修饰符对事件进行option设置。本次解释once修饰符以及native修饰符的情况。

once

        绑定once的监听器只会触发一次,在第一次触发后该监听器会被remove掉。很简单不多做解释了。

native

        我们可以称native为原型绑定。只有使用vue组件时我们会用到这个修饰符。当我们在组件上绑定监听时,我们绑定的是组件定义的监听。以element框架为例,<el-input>是element提供的组件。它在浏览器解析后是这样的。我们写<el-input @click="">时,这click绑定的是element给el-input定义的方法。我们其实把click绑定在了
div[class="el-input"]
上了。与直接在<input>上绑定是不同的,如果element没给el-input定义click (this.$emit('click'),function)组件需要这种方式才能定义click监听),那么我们这次绑定是无效的。

图1.el-input组件标签

当我们加上native词缀,<el-input @click.native="">这样,我们就把click事件直接绑定在了原型上了,也就是绑定在
input[class="el-input__inner"]
上了。这是我们绑定的就和input标签的原生监听器是一样的。所以当我们使用组件时需要经常使用原型绑定

前端豆知识,很小却有用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,426评论 0 11
  • 本文为2016年11月9日,『前端之巅』微信群在线分享活动总结整理而成,转载请在文章开头处注明来自『前端之巅』公众...
    尾尾阅读 10,697评论 3 32
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,380评论 0 25
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,275评论 0 25