Vue學習之路8-v-on指令學習簡單事件綁定之屬性

来源:https://www.cnblogs.com/vuenote/archive/2018/07/24/9359197.html
-Advertisement-
Play Games

前言 上一篇文章以v-on指令綁定click事件為例介紹了v-on指令的使用方法，本文介紹一下v-on綁定事件的一些屬性的使用方法。 v-on綁定指令屬性 .stop屬性 阻止單擊事件繼續向上傳播（簡單點說就是不讓父節點及父節點以上的節點事件觸發），本示例如果沒有stop屬性，父節點和爺爺節點事件將 ...


 前言

上一篇文章以v-on指令綁定click事件為例介紹了v-on指令的使用方法，本文介紹一下v-on綁定事件的一些屬性的使用方法。

v-on綁定指令屬性

      .stop屬性

阻止單擊事件繼續向上傳播（簡單點說就是不讓父節點及父節點以上的節點事件觸發），本示例如果沒有stop屬性，父節點和爺爺節點事件將會觸發，併在控制台輸出內容，示例代碼和示例結果如下：

 1  1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           <span v-on:click="clickthis">{{msg3}}</span>
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爺爺節點',
23 23         msg2: '我是父節點',
24 24         msg3: '測試click屬性',
25 25         title: 'v-on指令學習'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爺爺節點");
31 31       },
32 32       clickme(){
33 33         console.log("我是父節點");
34 34       },
35 35       clickthis(){
36 36         console.log("不列印父節點事件內容！")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>
View Code

如果添加stop屬性，則不會觸發父節點和爺爺節點事件，不會在控制台輸出相應事件內容，示例代碼和示例結果如下：

 1 1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           <span v-on:click.stop="clickthis">{{msg3}}</span>
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爺爺節點',
23 23         msg2: '我是父節點',
24 24         msg3: '測試click屬性',
25 25         title: 'v-on指令學習'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爺爺節點");
31 31       },
32 32       clickme(){
33 33         console.log("我是父節點");
34 34       },
35 35       clickthis(){
36 36         console.log("不列印父節點事件內容！")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>
View Code

.prevent屬性

該方法將通知 Web 瀏覽器不要執行與事件關聯的預設動作（如果存在這樣的動作），註意如果 Event 對象的 cancelable 屬性是 fasle，那麼就沒有預設動作，或者不能阻止預設動作，無論哪種情況，調用該屬性都沒有作用。

簡單示例如下，在頁面from表單中<input type=''"/> 如果 type 屬性是 "submit"

如果沒有指定prevent，點擊事件自動觸發from表單action跳向指定的網站，示例代碼和實例結果如下：

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">點我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令學習',
19              msg: 'form表單預設點擊打開百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("頁面重新載入了");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>
View Code

如果指定prevent，點擊事件則不會觸發from表單action跳向指定的網站，示例代碼和實例結果如下：

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit.prevent="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">點我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令學習',
19              msg: 'form表單預設點擊打開百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("去不了百度吧");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>
View Code

 .capture屬性

添加事件監聽器時使用事件捕獲模式，即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理，當點擊最底層元素<div>觸發事件時，先查找帶有監聽器的元素，按照節點優先順序先觸髮帶有該修飾符的元素，然後觸發自身事件，最後發生事件冒泡。

本示例中先觸發列印爺爺節點，然後觸發列印父節點，然後列印自身節點，最後觸發列印曾祖父節點，示例代碼和結果如下：

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.capture="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click.capture="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令學習',
23         msg: '我是div內部子節點',
24         msg1: '我是div父節點',
25         msg2: '我是div爺爺節點',
26         msg3: '我是div曾祖父節點'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("列印子節點");
32       },
33       click1(){
34           console.log("列印父節點");
35       },
36       click2(){
37         console.log("列印爺爺節點");
38       },
39       click3(){
40         console.log("列印曾祖父節點");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>
View Code

.self屬性

只當在event.target是當前元素自身時觸發處理函數，即事件不是從內部元素觸發的。通俗點說只有點擊元素本身的時候觸發事件，當點擊父元素觸發事件或者點擊子元素髮生事件冒泡時並不觸發元素本身事件。
本示例點擊父節點或者子節點時並不列印本身元素事件，示例代碼和實例結果如下：

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.self="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令學習',
23         msg: '我是div內部子節點',
24         msg1: '我是div父節點',
25         msg2: '我是div爺爺節點',
26         msg3: '我是div曾祖父節點'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("列印子節點");
32       },
33       click1(){
34           console.log("列印父節點");
35       },
36       click2(){
37         console.log("列印爺爺節點");
38       },
39       click3(){
40         console.log("列印曾祖父節點");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>
View Code

.once屬性

點擊事件將只會觸發一次，通俗點說就是元素自身事件只能使用一次，第二次點擊元素時候並不觸發事件，但是不阻止事件冒泡。
本示例中第一次點擊時列印子節點和父節點，第二次點擊時並不列印子節點，仍然列印父節點及以上節點，示例代碼和實力結果如下：

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click.once="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令學習',
23         msg: '我是div內部子節點',
24         msg1: '我是div父節點',
25         msg2: '我是div爺爺節點',
26         msg3: '我是div曾祖父節點'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("列印子節點");
32       },
33       click1(){
34           console.log("列印父節點");
35       },
36       click2(){
37         console.log("列印爺爺節點");
38       },
39       click3(){
40         console.log("列印曾祖父節點");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>
View Code

.passive屬性

滾動事件的預設行為 (即滾動行為) 將會立即觸發,而不會等待onScroll完成,這其中包含event.preventDefault()的情況

總結：關於最後一個屬性passive小編也不是很熟悉，如果需要請大家另行查閱資料。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 子div設置float後會導致父div無法自動撐開
    本文是從簡書複製的, markdown語法可能有些出入, 想看"正版"和更多內容請關註 簡書: "小賢筆記" 註: 文章部分轉載 彩泉 博客園 原因：內部的DIV因為float:left之後，就丟失了clear:both和display:block的樣式，所以外部的DIV不會被撐開。 以下是幾種解決 ...
  • 用mongols輕鬆打造websocket應用
    用websocket做聊天系統是非常合適的。 mongols是一個運行於linux系統之上的開源c++庫，可輕鬆開啟一個websocket伺服器。 首先，build一個websocket伺服器。 才幾行，這就成了嗎？沒錯！不信你用wsdump.py測試下。測了啊，怎麼一發送消息就關閉了連接？這是因為 ...
  • layui 的 GitHub 及 Gitee (碼雲) 倉庫
    GitHub: https://github.com/sentsin/layui/ Gitee：https://gitee.com/sentsin/layui ...
  • HTML標簽
    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ wid ...
  • JS實現文本中查找並替換字元
    JS實現文本中查找並替換字元 效果圖： 代碼如下，複製即可使用： 如有錯誤，歡迎聯繫我改正，非常感謝！！！ ...
  • HTML5
    <!DOCTYPE html> 1、定義： DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文檔類型定義（DTD）來解析文檔。<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。 2、作用： 聲明文 ...
  • JavaScript 中函數的參數
    functionName(parameter1, parameter2, parameter3) { // 要執行的代碼…… } 參數規則 JavaScript 函數定義時形參沒有指定數據類型。 JavaScript 函數對實參的類型不會進行檢測。 JavaScript 函數對實參的個數不會進行檢測 ...
  • JS實現用特殊符號替換字元串的中間部分區域
    一、引入 相信很多人都遇到過敏感信息需要做部分隱藏功能，大多數都是用特殊符號去替換。 正好今天我又遇到這樣的前端顯示的需求，正好把相關JS記錄下來，方便下次再用。 二、JS部分 三、應用實例 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類