2. 程式人生 > >vue的修飾符

vue的修飾符

阿新 • • 發佈：2020-08-28

v-on

  • 縮寫：@

  • 事件修飾符

  • .stop - 呼叫 event.stopPropagation()。      //阻止冒泡
.prevent - 呼叫 event.preventDefault()。       //阻止事件預設行為
.capture - 新增事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
.native - 監聽元件根元素的原生事件。
.once - 只觸發一次回撥。
.left - (2.2.0) 只當點選滑鼠左鍵時觸發。
.right - (2.2.0) 只當點選滑鼠右鍵時觸發。
.middle - (2.2.0) 只當點選滑鼠中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式新增偵聽器
     
    例子:
    <!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> 
    <!-- 提交事件不再過載頁面 --> <form v-on:submit.prevent="onSubmit"></form> 
    <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a>

    按鍵修飾符

    • .enter
    • .tab
    • .delete (捕獲“刪除”和“退格”鍵)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
    • 例子:<!-- 只有在 `key` 是 `Enter` 時呼叫 `vm.submit()`--!>
<input v-on:keyup.enter="submit">

    • 你還可以通過全域性 config.keyCodes 物件自定義按鍵修飾符別名：

      // 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

       

       

    相關推薦

    vue修飾符

    span 修飾符 執行順序 而不是 冒泡 點擊 不執行 spa 第一次 <body> <div id="app" @click.prevent=""clickme> <section id="section" @cli

    vue修飾符——.lazy

    在輸入框中，v-model 預設是同步資料，使用 .lazy 會轉變為在 change 事件中同步 ， 也就是在失去焦點 或者 按下回車鍵時才更新 <template>     <div>         <

    vue修飾符--可能是東半球最詳細的文件（滑稽）

    為了方便大家寫程式碼，vue.js給大家提供了很多方便的修飾符，比如我們經常用到的取消冒泡，阻止預設事件等等~ 目錄 表單修飾符 事件修飾符 滑鼠按鍵修飾符 鍵值修飾符 v-bind修飾符（實在不知道叫啥名字） 表單修飾

    VUE修飾符sync

    sync只是給大傢伙提供了一種與父元件溝通的思路而已！只是單純的在子元件當中修改父元件的某個資料時，建議使用sync <child isShow.sync="isShow/> isShow.sync="isShow"其實是 @update:isShow="bol=>isSho

    vue組件雙向綁定.sync修飾符的一個坑

    bar 完全 雙向綁定 我們 會有 new 由於 需要 筆記 我們知道組件是單項的，但是有時候需要雙向，這時候我們可以使用.sync修飾符，但今天遇到一個坑，一直不成功，花了半小時試出來的。。。。 在編程的時候我們很習慣冒號後面跟著空格。而.sync雙向綁定需要子組件顯性觸

    Vue.js中.native修飾符

    image java HR pan cti -a function bsp clas .native修飾符 官方對.native修飾符的解釋為： 　　有時候，你可能想在某個組件的根元素上監聽一個原生事件。可以使用 v-on 的修飾符 .native 。例如： <my

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

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

    vue中常用的事件和修飾符簡單總結

    事件 修飾符1:阻止冒泡事件JS事件流其中一種是冒泡事件，當一個元素被觸發一個事件時，該目標元素的事件會優先被執行，然後向外傳播到每個祖先元素，恰如水裏的一個泡泡似的，從產生就一直往上浮，到在水平面時，它才消失。在這個過程中，如果你只希望事件發生在目標元素，而不想它傳播到祖先元素上去，那麽你需要在“泡泡”離開

    vue 中 v-model 和 .sync修飾符

    port con ava use input del lac username strong v-model 1 <input v-model="searchText"> 2 3 等價於 4 <input 5 v-bind:valu

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

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

    Vue.js（1）- 指令和修飾符

    <template> <div v-click v-text="msg" v-html="msg" :class="['box1',flag ? 'box2': '']">{{msg}}</div> <p @click="Func(arg)"

    【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> <!-- 提交事件不再過載頁面，

    2018年11月09日 關於Vue的過濾器 and 自定義指令—基礎配置 and 配置傳參及修飾符

    1、過濾器 //在html下的程式碼 <div id="app"> <div> <input type="text" v-model="len" />mm {{len | meter}} </div

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

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

    Vue 框架-03-鍵盤事件、健值修飾符、雙向資料繫結

    Vue 框架-03-鍵盤時間及健值修飾符 一、鍵盤事件，當按鍵盤時，在控制檯輸出提示 html 原始碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

    Vue.js-06：第六章 - 按鍵修飾符的使用

     一、前言 　　 上週末的時候，準備試試將 ASP.NET Core 的專案部署到 CentOS 伺服器上，結果在一個接一個坑裡面跳，最後 Supervisor 守護程式還是有問題，於是，採用重灌系統大招，結果，碰巧趕上 aspnetcore 的一個 bug（ Missing

    說說 Vue.js v-model 指令的修飾符

    1 .lazy v-model 指令預設會在 input 事件中載入輸入框中的資料（中文輸入法中輸入拼音的過程除外）。我們可以使用 .lazy 懶載入修飾符，讓其只在 change 事件中再載入輸入框中的資料。 html： <div id="app">

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

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