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,074評論 0 29
  • VUE Vue :數據驅動的M V Vm框架 m :model(后臺提供數據),v :view(頁面),vM(模板...
    wudongyu閱讀 5,423評論 0 11
  • 本文為2016年11月9日,『前端之巔』微信群在線分享活動總結整理而成,轉載請在文章開頭處注明來自『前端之巔』公眾...
    尾尾閱讀 10,670評論 3 32
  • 主要還是自己看的,所有內容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,375評論 0 25
  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,270評論 0 25