vue修飾符

阿新 • • 發佈：2017-05-23

span 修飾符執行順序而不是冒泡點擊不執行 spa 第一次

<body>
    <div id="app" @click.prevent=""clickme>
        <section id="section" @click.stop="clickme">
            <div id="div" @click.self="clickme">
                <span id="span" @click.capture="clickme">
                    <p id="p" @click.once="clickme">
                        用鼠標雙擊我，看看事件的傳遞真正順序。
                     
</p>
                </span>
            </div>
        </section>
        點擊事件的響應順序如下：{{message}}
    </div>
</body>

鼠標雙擊之後執行順序：span->p->section->span->section

上面各個修飾符的作用：

　　　　.prevent: 提交事件不再重載頁面

　　　　.stop: 阻止單擊事件冒泡

　　　　.self: 當事件發生在該元素本身而不是子元素的時候會觸發

　　　　.capture: 事件偵聽，事件發生的時候會調用

　　　　.once: 跟v-once作用類似，只渲染一次，第二次不會執行

解析：

第一次點擊：span有事件監聽，所以最先執行的是它，然後是事件發生的元素本身<p>，接著span執行了跳過，然後到了內層的div，由於是.self，而事件不是在div本身，所以不執行，最後到section，由於有.stop冒泡阻止，所以執行到這裏就停止了。最外層的div不會執行。

span->p->section

第二次點擊，同樣是先到span，由於<p>是.once，只被渲染一次，所以第二次不會執行，跳過了span，跳過了div，到了section......

span->section

後面的不管多少次點擊，到時出現span->section的結果。

本文轉載：http://www.2cto.com/kf/201703/615547.html

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中根容器元素以後所有的操作

vue修飾符

相關推薦