1. 程式人生 > >事件修飾符來處理 DOM 事件細節

事件修飾符來處理 DOM 事件細節

ue.js通過由點(.)表示的指令字尾來呼叫修飾符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止單擊事件冒泡 -->
<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>
<!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能點選一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符:

<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難,所以 Vue 為最常用的按鍵提供了別名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名:

.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
例項

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

相關推薦

事件修飾處理 DOM 事件細節

ue.js通過由點(.)表示的指令字尾來呼叫修飾符。.stop.prevent.capture.self.once<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件

事件修飾修改事件

功能:當滑鼠移動到"DEAD SPOT"上時,停止更新位置資訊。預設的,滑鼠在P標籤位置這一行移動時,由於有v-on,預設的會有一個預設的event事件物件自動建立給函式。所以當我在這一行移動時,eventX和eventY的值會不斷變化。現在的目的就是到滑鼠移動到"DEAD SPOT"時,不傳遞event事件

vue--事件處理--事件修飾

記錄下學習此章節的一些重點。。。   使用修飾符時,順序很重要;相應的程式碼會以同樣的順序產生。因此,用 v-on:click.prevent.self 會阻止所有的點選,而 v-on:click.self.prevent 只會阻止對元素自身的點選。   不要把

[vue]vue v-on事件綁定(原生修飾+vue自帶事件修飾)

w3cschool char 用戶 inside img ins app parent pan preventDefault阻止默認行為和stopPropagation終止傳遞 event.preventDefault() 鏈接本來點了可以跳轉, 如果註冊preventDe

Vue.js-03:第三章 - 事件修飾的使用

 一、前言   熟悉了 Vue 的指令系統後,在實際開發中,不可避免的會使用到對於事件的操作,如何處理 DOM 事件流,成為我們必須要掌握的技能。不同於傳統的前端開發,在 Vue 中給我們提供了事件修飾符這一利器,使我們可以便捷的處理 DOM 事件,本章,一起來學習如何使用事件修飾符來實現對於 D

互動、事件修飾練習001 仿百度搜索框

需求: 實現搜尋框的搜尋功能 a) 對使用者在輸入框內輸入的值進行雙向資料繫結 b) 點選"搜尋"按鈕,進行網路請求 c) 將請求回的資料在搜尋框下進行展示 實現通過方向鍵控制搜尋選項 a) 繫結上下方向鍵的處理函式 b) 對展示的資料進行樣式繫結 程式碼:

【Vue.js 牛刀小試】03:第三章 - 事件修飾的使用

前言         熟悉了 Vue 的指令系統後,在實際開發中,不可避免的會使用到對於事件的操作,如何處理 DOM 事件流,成為我們必須要掌握的技能。不同於傳統的前端開發,在 Vue 中給我們提供了事件修飾符這一利器,使我們可

Vue—事件修飾

Vue事件修飾符 Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節,如:event.preventDefault() 或 event.stopPropagation()。 Vue.js通過由點 (.) 表示的指令字尾來呼叫修飾符。 .stop.prevent.capture.self

vue.js - 事件修飾

事件修飾符 .stop : 阻止事件冒泡 .prevent : 阻止預設事件 .once : 只生效一次 <!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再過載頁面,

AngularJS 控制器中處理DOM事件

# AngularJS 控制器中處理DOM事件 標籤(空格分隔): AngularJS — AngularJS應用中的DOM事件可以在控制器中完成。AJ框架為我們提供了事件繫結指令,只需要在原生的avascript事件名稱前增加ng-字首,如 ng-click,ng-keyup…。下面是一個例子

6.vue鍵盤事件以及鍵值事件修飾

1.js檔案:      //在使用vue之前必須例項化vue物件 new Vue({     /*el:指element  需要獲取的元素,一定是html中根容器元素         以後所有的操作

5.vue事件修飾

1.js檔案:     //在使用vue之前必須例項化vue物件 new Vue({     /*el:指element  需要獲取的元素,一定是html中根容器元素         以後所有的操作均是在這個根

vue v-model後面的修飾。去掉收尾空白的字元。 v-on 提供了事件修飾,不過載

.trim 如果要自動過濾使用者輸入的首尾空白字元,可以給 v-model 新增 trim 修飾符: <input v-model.trim="msg"> 如果想自動將使用者的輸入值轉為數值型別,可以給 v-model 新增 number 修飾符:

包含事件修飾的v-on指令

   v-on       事件繫結指令,簡寫可以使用 <input type="button" v-bind:title="mytile" value="屬性" @:click="show"/> 繫結點選事件:click <input type=

【Vue.js學習筆記】4:事件修飾,鍵盤事件,鍵值修飾

事件修飾符 在Vue的官方文件中給出了引入v-on:的事件修飾符的理念是,不希望在方法中去處理DOM細節。 事件冒泡 事件在事件源上發生,處理事件的方法並未繫結在該事件源上,事件就要向外或者向內傳播(propagation),也稱事件冒泡。在JS裡,可以用事件物件的stopP

let用處理迴圈事件繫結問題的原理分析

      在編寫js程式碼時,有一個問題基本上人人都會遇到,那就是用for迴圈為一組DOM物件繫結事件響應回撥,每個事件回掉函式中i的值都是DOMlist.length。 上程式碼: var btns = document.getElements

27.28. VUE學習之--事件修飾之stop&capture&self&once例項詳解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist

v-on 事件修飾

Technorati Tags: vue 事件修飾符: .stop 阻止冒泡 .prevent 阻止預設事件 .capture 新增事件偵聽器時使用事件捕獲模式 .self 只當該事件在該元素本身時(不是子元素)觸發時才回調 .once 事件只觸發一次 一、.stop 修飾符

從零開始學 Web 之 Vue.js(一)Vue.js概述,基本結構,指令,事件修飾,樣式

大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 部落格園:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/

前端框架vue.js系列(4):事件修飾與按鍵修飾

vue修飾符是指在觸發事件或按鍵時額外的觸發條件或回撥。比如點選事件只允許觸發一次,可以使用@click.once。 原生事件物件 vue可以通過以下方式,獲取原生的事件物件: <button @click="getEventDom($event);">