Vue修飾符

事件修飾符

在Vue 2.0中，事件修飾符允許我們在處理事件時對其進行修改或增強。以下是一些常用的事件修飾符：

  1. .stop：阻止事件冒泡。使用此修飾符后，父元素的相同事件不會再觸發。
  2. .prevent：阻止事件的默認行為。比如，提交表單時可以使用.prevent修飾符阻止頁面的刷新。
  3. .capture：使用事件捕獲模式，即在父元素上觸發事件處理程序，然后才在子元素上觸發。默認情況下，事件是在冒泡階段處理的。
  4. .self：只有當事件是從元素自身觸發時才觸發事件處理程序。如果事件是從子元素冒泡上來的，那么事件處理程序不會被觸發。
  5. .once：只觸發一次事件處理程序。即使事件被多次觸發，只有第一次觸發時會執行相應的處理程序。
  6. .passive：指定事件處理程序不會調用preventDefault()方法。這可以提升滾動性能。

.stop 阻止事件冒泡

<template><div><div @click="showInfo" style="height: 50px;background: yellowgreen;"><button @click.stop="showInfo">點我提示信息</button></div></div>
</template>
<script>
export default {methods: {showInfo(e) {// e.stopPropagation();alert(".prevent 修飾符")}}
};
</script>

.prevent 阻止事件的默認行為

<template><div>// 阻止了表單提交時的默認行為<form @submit.prevent="handleSubmit"><input type="text" /><button type="submit">Submit</button></form>// 阻止了a標簽的默認行為<a href="www.baidu.com" @click.prevent="showInfo">點我提示信息</a></div>
</template>
<script>
export default {methods: {handleSubmit() {console.log('.prevent 修飾符')},showInfo(e) {// e.preventDefault();alert(".prevent 修飾符")}}
};
</script>

.capture 事件捕獲模式

<template><div><div style="background: red;padding: 5px;" @click.capture="showMsg(1)">div1<div style="background: yellow;padding: 5px;" @click="showMsg(2)">div2</div></div></div>
</template>
<script>
export default {methods: {showMsg(msg) {console.log(msg)}}
};
</script>

.once 只觸發一次事件處理程序

<template><div><button @click.once="showInfo">點我提示信息</button></div>
</template>
<script>
export default {methods: {showInfo() {alert(".prevent 修飾符")}}
};
</script>

.self 只有當事件是從元素自身觸發時才觸發事件

<template><div><div @click.self="showInfo" style="height: 50px;background: yellowgreen;"><button @click="showInfo">點我提示信息</button></div></div>
</template>
<script>
export default {methods: {showInfo(e) {// e.stopPropagation();alert(".prevent 修飾符")}}
};
</script>

.passive 事件的默認行為立即執行，無需等待事件回調執行完成

<template><div><ul @scroll="headelScroll" @wheel.passive="headelWhell" style="height: 100px; overflow: auto;background: bisque;color:#fff"><li style="height: 50px;background: rebeccapurple;">1</li><li style="height: 50px;background: blue;">2</li><li style="height: 50px;background: rebeccapurple;">3</li><li style="height: 50px;background: blue;">4</li></ul></div>
</template>
<script>
export default {methods: {headelScroll() {console.log("@");},// 滾輪事件headelWhell() {for (let i = 0; i <100000; i++) {console.log('++');}console.log("@@");}}
};
</script>

.native 就是在父組件中給子組件綁定一個原生的事件，就將子組件變成了普通的HTML標簽，不加 native事件是無法觸發的。

<my-component v-on:click.native="doSomething"></my-component>

鍵盤修飾符

在Vue 2.0中，你可以使用鍵盤修飾符來更方便地處理鍵盤事件。鍵盤修飾符是在處理鍵盤事件時使用的一種特殊語法，在按下特定鍵時執行相應的操作。

Vue 2.0中支持的鍵盤修飾符有以下幾種：

普通

  • .enter：按下Enter鍵。
  • .tab：按下Tab鍵。
  • .delete 或 .backspace：按下Delete或Backspace鍵。
  • .esc：按下Escape鍵。
  • .space：按下Space鍵。
  • .up：按下上箭頭鍵。
  • .down：按下下箭頭鍵。
  • .left：按下左箭頭鍵。
  • .right：按下右箭頭鍵。

系統修飾鍵

  • .ctrl：按下Ctrl鍵。
  • .alt：按下Alt鍵。
  • .shift：按下Shift鍵。
  • .meta：按下Meta鍵（通常是Command鍵或Windows鍵）。

還可以通過以下方式自定義一些全局的鍵盤碼別名：

<!-- HTML -->
<div id="app"><input type="text" v-on:keydown.f5="prompt()">
</div>Vue.config.keyCodes.f5 = 116;
let app = new Vue({el: '#app',methods: {prompt: function() {alert('我是 F5！');}}
});

你可以通過在Vue模板中使用這些修飾符來監聽相應的鍵盤事件。以下是一個示例：

<template><div><input v-on:keydown.enter="handleEnter" /><input v-on:keydown.tab="handleTab" /><input v-on:keydown.delete="handleDelete" /><input v-on:keydown.esc="handleEscape" /><input v-on:keydown.space="handleSpace" /><input v-on:keydown.up="handleUp" /><input v-on:keydown.down="handleDown" /><input v-on:keydown.left="handleLeft" /><input v-on:keydown.right="handleRight" /><input v-on:keydown.ctrl="handleCtrl" /><input v-on:keydown.alt="handleAlt" /><input v-on:keydown.shift="handleShift" /><input v-on:keydown.meta="handleMeta" /><input v-on:keydown="handleAll" /><!-- 其它 --><input v-on:keydown.caps-lock="handleAll" /></div>
</template><script>
export default {methods: {handleEnter() {// 按下Enter鍵的處理邏輯},handleTab() {// 按下Tab鍵的處理邏輯},// 其他鍵盤事件處理函數...handleAll () {console.log(e.key, e.keyCode); // CapsLock 20}}
}
</script>

在上面的示例中，我們分別在不同的input元素上使用了不同的鍵盤修飾符，并綁定了相應的事件處理函數。當用戶在輸入框中按下對應的鍵時，對應的事件處理函數會被調用。

希望這能幫助到你！如果你有任何進一步的問題，請隨時問我。

鼠標修飾符

針對的就是左鍵、右鍵、中鍵點擊，對應的鼠標鍵點擊才會觸發函數

left 左鍵點擊
right 右鍵點擊
middle 中鍵點擊
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

表單修飾符

在Vue.js 2.0中，表單修飾符是一種用于修改表單輸入行為的特殊指令。它們是通過在指令后面添加一個句點(“.”)和修飾符來使用的。

下面是一些常用的表單修飾符：

  • .lazy：默認情況下，Vue會在每次輸入事件觸發時同步更新輸入框的值。使用.lazy修飾符可以改為在change事件觸發時進行同步更新。

  • .number：將用戶的輸入值轉為數字類型。如果輸入的值無法轉為有效的數字，則會返回原始的字符串。

  • .trim：自動過濾用戶輸入的首尾空白字符。

  • .native：監聽組件根元素的原生事件，而不是組件內部通過$emit觸發的自定義事件。

使用示例：

<input type="text" v-model.lazy="message"> <!-- 在change事件觸發時更新message值 -->
<input type="text" v-model.number="age"> <!-- 將用戶輸入的值轉為數字 -->
<input type="text" v-model.trim="username"> <!-- 自動去除輸入內容的首尾空白字符 -->

以上是一些常用的Vue.js 2.0表單修飾符，它們可以幫助我們更好地處理表單輸入。

v-bind修飾符

在Vue.js 2.0中，v-bind 是用來綁定一個或多個屬性的指令。它可以接受修飾符，用于修改綁定的行為。下面是一些常用的 v-bind 修飾符：

  • .prop：將屬性綁定到組件的屬性，而不是綁定到DOM元素的特性。這在使用自定義組件時非常有用。

  • .camel：將屬性名轉換為駝峰式命名。例如，v-bind:my-prop.camel 將會綁定到組件的 myProp 屬性，而不是 my-prop 屬性。

  • .sync：實現雙向綁定。當綁定的值發生變化時，會將變化同步回父組件。注意，在實際使用中，需要在父組件中使用 .sync 修飾符來更新變量。

  • .modifiers：用于傳遞修飾符的參數。例如，.number、.trim 修飾符可以使用 v-bind:my-prop.number.trim。

使用示例：

<custom-component v-bind:prop-name.prop="value"></custom-component> <!-- 將屬性綁定到組件的屬性 -->
<my-input v-bind:input-value.camel="myValue"></my-input> <!-- 將屬性名轉換為駝峰式命名 -->
<my-component v-bind:my-prop.sync="parentData"></my-component> <!-- 實現雙向綁定 -->
<input v-bind:value.trim="inputValue"> <!-- 過濾輸入值的首尾空白字符 -->

注意，在Vue 2.0中，v-bind 通常可以用簡寫的冒號語法來代替，例如 :prop-name.prop="value" 等同于 v-bind:prop-name.prop="value"。

以上是一些常用的Vue.js 2.0 v-bind 修飾符，它們可以幫助我們更好地控制屬性綁定的行為。

.sync

作用：sync修飾符是一個語法糖，類似v-model，它主要是解決了父子組件的雙向綁定問題。因為vue提倡的是單向數據流動，因此不能直接在子組件里面修改父組件傳過來的數據，我們一般$emit。

sync修飾符其實是做了兩步動作：
1、聲明傳的數據visible
2、聲明@update:visible事件

注意：

使用sync的時候，子組件傳遞的事件名格式必須為update:value，其中value必須與子組件中props中聲明的名稱完全一致
注意帶有 .sync 修飾符的 v-bind 不能和表達式一起使用
將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常工作的

原始寫法$emit：

<!-- 父組件 -->
<template><div id="app"><button @click="visible=true">顯示</button><my-alert :visible="visible" @close="closeAlert"></my-alert></div>
</template>
<script>
import myalert from './components/myalert'
export default {components:{'my-alert': myalert},data(){return {visible:false}},methods:{closeAlert(value){this.visible = value}}}
</script>

<!-- 子組件 -->
<template><div class="cont" v-show="visible"><h2>這是一個對話框</h2><button @click="closeAlert">關閉</button></div>
</template><script>export default {name: "myalert",props:{visible:{type:Boolean,default:false}},methods:{closeAlert(){this.$emit('close',false)}}}
</script>

一個數據就要帶一個自定義事件才能實現雙向綁定，為了避免亂起名引起的混亂，事件名我們最好約定一下規則。
因為是修改visible這個數據，因此事件我們統一就叫@update:visible

<!-- 父組件 -->
<template><div id="app"><button @click="visible=true">點擊</button><my-alert :visible="visible" @update:visible="value => visible=value"></my-alert></div>
</template><script>
import myalert from './components/myalert'
export default {name: 'App',components:{'my-alert': myalert},data(){return {visible:false}}}
</script><!-- 子組件 -->
<template><div class="cont" v-show="visible"><h2>這是一個對話框</h2><button @click="closeAlert">關閉</button></div>
</template><script>export default {name: "myalert",props:{visible:{type:Boolean,default:false}},methods:{closeAlert(){this.$emit('update:visible',false)}}}
</script>

這么寫還是太麻煩了，但有了統一的規則，系統就可以幫我們自動生成不必要的代碼，這就是sync修飾符的作用，它讓寫法更為簡潔：

<!-- 父組件 -->
<template><div id="app"><button @click="visible=true">點擊</button><my-alert :visible.sync="visible"></my-alert></div>
</template><script>
import myalert from './components/myalert'
export default {name: 'App',components:{'my-alert': myalert},data(){return {visible:false}},}
</script>

<!-- 子組件 -->
<template><div class="cont" v-show="visible"><h2>這是一個對話框</h2><button @click="closeAlert">關閉</button></div>
</template><script>export default {name: "myalert",props:{visible:{type:Boolean,default:false}},methods:{closeAlert(){this.$emit('update:visible',false)}}}
</script>

.prop

prop:設置自定義標簽屬性，編譯后不會出現在html中，避免暴露數據，防止污染HTML結構

<input id="input" type="foo" value="11" :data="inputData"></input>
// 標簽結構: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 標簽結構: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined

.camel

camel:將命名變為駝峰命名法，只有props和.prop會默認將kebab-case轉化為camelCase，剩下的作為attribute的不會。而.camel修飾符正是針對attribute的。如將view-Box屬性名轉換為 viewBox。

data() {return {msgText: 'aaa'}
}<h2 :msg-text="msgText">原本</h2>
<!-- 編譯后為<h2 msg-text="aaa">原本</h2> --><h2 :msg-text.camel="msgText">加camel修飾符</h2>
<!-- 編譯后為<h2 msgtext="aaa">加camel修飾符</h2>,由于camel將msg-text轉化為msgText,html中不區分大小寫，所以會將大寫都轉化為小寫，則最終結果為msgtext -->

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/36455.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/36455.shtml
英文地址，請注明出處：http://en.pswp.cn/news/36455.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

mybatis 中的＜![CDATA[ ]]＞用法及說明

mybatis 中的＜![CDATA[ ]]＞用法及說明

<![CDATA[ ]]>作用 <![CDATA[ ]]> 在mybatis、ibatis等書寫SQL的xml中比較常見&#xff0c;是一種XML語法&#xff0c;他的作用是 可以忽略xml的轉義&#xff08;在該標簽中的語句和字符原本是什么樣的&#xff0c;在拼接成SQL后還是什么樣的&#xff09; 使用&a…
閱讀更多...
代碼生成模型任務設計

代碼生成模型任務設計

背景&#xff1a; 模型應該具備&#xff0c;理解代碼的能力、知道代碼規則的能力、知道關鍵詞和變量的能力、知道代碼邏輯的能力、文本到代碼翻譯能力、代碼關聯能力、代碼續寫能力。 代碼理解能力&#xff1a;pretrain讓模型讀足夠多代碼、記住代碼一些規則、代碼問答、基于…
閱讀更多...
PHP codeigniter4 搭配Nginx

PHP codeigniter4 搭配Nginx

> 主要是為了用Nginx運行PHP環境 1. Nginx 官方文檔的配置 default.conf? This configuration enables URLs without “index.php” in them and using CodeIgniter’s “404 - File Not Found” for URLs ending with “.php”. server {listen 80;listen [::]:80;se…
閱讀更多...
springboot 基礎

springboot 基礎

鞏固基礎&#xff0c;砥礪前行 。 只有不斷重復&#xff0c;才能做到超越自己。 能堅持把簡單的事情做到極致&#xff0c;也是不容易的。 SpringBoot JavaEE 簡介 JavaEE的局限性&#xff1a; 1、過于復雜&#xff0c;JavaEE正對的是復雜的分布式企業應用&#xff0c;然而現實…
閱讀更多...
MySQL表的基礎的增刪改查

MySQL表的基礎的增刪改查

增(insert into) 插入所有列的數據 不寫具體列名要確保字段都對應正確 -- 假設你有一個名為 "employees" 的表&#xff0c;有多個列 INSERT INTO employees VALUES (101, Alice, Manager, 50000);插入指定列的數據 -- 假設你有一個名為 "students" 的表&…
閱讀更多...
爬蟲如何應對網站的反爬機制？如何查找user-agent對應的值

爬蟲如何應對網站的反爬機制？如何查找user-agent對應的值

import requestsurl https://movie.douban.com/top250 response requests.get(url) # 查看結果 print(response)在requests使用一文中我們有講到&#xff0c;當狀態碼不是200時表示爬蟲不可用&#xff0c;也就是說我們獲取不到網頁源代碼。但是我們還是可以掙扎一下&#xff…
閱讀更多...
一文秒懂HTTP協議到底是什么？原理？

一文秒懂HTTP協議到底是什么？原理？

目錄 1.什么是http協議&#xff1f; 2.http協議的版本&#xff1f; 3.http文本框架 4.http請求報文 5.http報文格式 6.http響應報文 7.HTTP的狀態碼 8.HTTP首部介紹 9.什么是URL和URI&#xff1f; 10.CGI是什么&#xff1f; 1.什么是http協議&#xff1f; http&#…
閱讀更多...
測試架構師如何落地性能測試方案（一）

測試架構師如何落地性能測試方案（一）

背景描述&#xff1a; 最近剛接手一個新項目&#xff0c;在最開始的時候要求對這個項目做性能測試&#xff0c;產品經理也給不出性能需求&#xff0c;只因為這個項目是電商項目&#xff0c;可能會有高并發&#xff0c;秒殺的場景&#xff0c;所以產品經理要求我們對這個項目必…
閱讀更多...
vue3父子組件傳值；vue3子組件傳值給父組件；vue3子組件監聽父組件接口傳值；父子組件事件調用

vue3父子組件傳值；vue3子組件傳值給父組件；vue3子組件監聽父組件接口傳值；父子組件事件調用

代碼在文末&#xff0c;均可直接復制使用 本文主要描述&#xff0c;父子組件傳值、調用等問題 文章目錄 問題1&#xff1a;子組件接收不到父組件傳值問題2&#xff1a;子組件接受的值&#xff0c;修改后&#xff0c;發現父組件值也改變了問題3&#xff1a;子組件接受值&#xf…
閱讀更多...
07-HDFS入門及shell命令

07-HDFS入門及shell命令

1 文件系統 是一種存儲和組織數據的方法&#xff0c;它使得文件訪問和查詢變得容易使得文件和樹形目錄的抽象邏輯概念代替了磁盤等物理設備使用數據塊的概念&#xff0c;用戶使用文件系統來保存數據不必關心數據底層存在硬盤哪里&#xff0c;只需記住這個文件的所屬目錄和文件…
閱讀更多...
STM32基于CubeIDE和HAL庫 基礎入門學習筆記：物聯網項目開發流程和思路

STM32基于CubeIDE和HAL庫 基礎入門學習筆記：物聯網項目開發流程和思路

文章目錄&#xff1a; 第一部分&#xff1a;項目開始前的計劃與準備 1.項目策劃和開發規范 1.1 項目要求文檔 1.2 技術實現文檔 1.3 開發規范 2.創建項目工程與日志 第二部分&#xff1a;調通硬件電路與驅動程序 第三部分&#xff1a;編寫最基礎的應用程序 第四部分&…
閱讀更多...
opencv帶GStreamer之Windows編譯

opencv帶GStreamer之Windows編譯

目錄 1、下載GStreamer和安裝2. GSTReamer CMake配置3. 驗證是否配置成功 1、下載GStreamer和安裝 下載地址如下&#xff1a; gstreamer-1.0-msvc-x86_64-1.18.2.msi gstreamer-1.0-devel-msvc-x86_64-1.18.2.msi 安裝目錄無要求&#xff0c;主要是安裝完設置環境變量 xxx\1…
閱讀更多...
【css】漸變

【css】漸變

漸變是設置一種顏色或者多種顏色之間的過度變化。 兩種漸變類型&#xff1a; 線性漸變&#xff08;向下/向上/向左/向右/對角線&#xff09; 徑向漸變&#xff08;由其中心定義&#xff09; 1、線性漸變 語法&#xff1a;background-image: linear-gradient(direction, co…
閱讀更多...
一圖搞懂二層交換機、三層交換機和路由器的區別

一圖搞懂二層交換機、三層交換機和路由器的區別

二層交換機、三層交換機、路由器的區別 二層交換機、三層交換機、路由器對比二層交換機三層交換機路由器工作在第幾層數據鏈路層&#xff08;第二層&#xff09;網絡層&#xff08;第三層&#xff09;網絡層&#xff08;第三層&#xff09;功能學習和轉發幀根據IP地址轉發數據…
閱讀更多...
數據鏈路層是什么？

數據鏈路層是什么？

數據鏈路層承接上層的數據&#xff0c;然后使用下層提供的信道&#xff0c;按照一定的規則&#xff0c;進行數據傳輸。 物理層提供了傳輸媒體與連接&#xff08;信道&#xff09;&#xff08;數據鏈路層使用的信道通常是物理層提供的信道&#xff09;&#xff0c;即提供了比特…
閱讀更多...
webpack自動注冊全局組件

webpack自動注冊全局組件

例如&#xff0c;在form文件夾下有許多流程類表單&#xff0c;一個一個注冊引入非常浪費時間&#xff0c;可使用webpack的require.context方法來自動導入 import { firstToUpper } from /utils/methodsconst taskTable {install: vue > {const req require.context(../fo…
閱讀更多...
springboot結合element-ui實現增刪改查，附前端完整代碼

springboot結合element-ui實現增刪改查，附前端完整代碼

實現功能 前端完整代碼 后端接口 登錄&#xff0c;注冊&#xff0c;查詢所有用戶&#xff0c;根據用戶名模糊查詢&#xff0c;添加用戶&#xff0c;更新用戶&#xff0c;刪除用戶 前端 注冊&#xff0c;登錄&#xff0c;退出&#xff0c;用戶增刪改查&#xff0c;導航欄&#…
閱讀更多...
Android Sutdio 導入libs文件夾下的jar包沒反應

Android Sutdio 導入libs文件夾下的jar包沒反應

有點離譜&#xff0c;笨笨的腦子才犯的錯誤 首先發現問題&#xff1a;轉移項目的時候 直接復制粘貼libs文件夾下的jar包到新項目&#xff0c;在build.gradle文件下 使用語句并應用也沒反應&#xff08;jar包沒有出現箭頭且代碼報錯&#xff0c;找不到&#xff09; implementa…
閱讀更多...
什么樣的 PLC 可以算是高端 PLC？

什么樣的 PLC 可以算是高端 PLC？

針對問題本身&#xff0c;有的回答里都提到了。可靠性&#xff0c;掃描時間&#xff0c;帶離散量點數&#xff0c;帶模擬量輸出點數&#xff0c;擴展性&#xff0c;這些都可以看作PLC系統級別劃分的依據。比如說&#xff0c;有相應安全完整性等級認證的LOGIC SOLVER為核心的PLC…
閱讀更多...
SpringBoot復習：（37）自定義ErrorController

SpringBoot復習：（37）自定義ErrorController

所有接口統一返回的數據格式 package cn.edu.tju.domain;public class MyResponse {private int code;private String message;private String exception;private String stack;public int getCode() {return code;}public void setCode(int code) {this.code code;}public S…
閱讀更多...
最新文章

Copyright @ 2022~2023