<button @click="handleClick">點擊我</button>

這里綁定了一個 click 事件，并且綁定的函數(shù)是 handleClick。

<!-- 阻止默認(rèn)行為 -->
<button @click.prevent="handleClick">點擊我</button>

<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">點擊我</button>

<!-- 使用事件捕獲模式 -->
<button @click.capture="handleClick">點擊我</button>

<!-- 只有當(dāng)事件是從事件源本身觸發(fā)時才觸發(fā)回調(diào)函數(shù) -->
<button @click.self="handleClick">點擊我</button>

<!-- 只觸發(fā)一次回調(diào)函數(shù) -->
<button @click.once="handleClick">點擊我</button>

<!-- 提高頁面滾動的流暢度 -->
<button @click.passive="handleClick">點擊我</button>

具體示例：

當(dāng)一個鏈接被點擊時，會觸發(fā) click 事件。如果鏈接沒有設(shè)置 href 屬性，則默認(rèn)的行為是不進(jìn)行跳轉(zhuǎn)，

但如果設(shè)置了 href 屬性，則會跳轉(zhuǎn)到 href 指定的頁面。
在這種情況下，可以使用 .prevent 和 .stop 修飾符來阻止鏈接的默認(rèn)跳轉(zhuǎn)行為和冒泡傳播。


我們給鏈接設(shè)置了 href 屬性，并綁定了 click 事件和 handleLinkClick 方法。
同時，我們在鏈接上使用了 .prevent 和 .stop 修飾符來阻止默認(rèn)的跳轉(zhuǎn)行為和冒泡傳播。
<template>
  <div @click="handleDivClick">//上層點擊事件。用了檢測下面的點擊事件有沒有冒泡上來
    <a  rel="external nofollow"  @click.prevent.stop="handleLinkClick">點擊我</a>
  </div>
</template>

<script>
export default {
  methods: {
    handleLinkClick() {
      console.log('內(nèi)部事件————鏈接被點擊了');
    },
    handleDivClick() {
      console.log('外部事件————div 被點擊了');
    }
  }
};
</script>
在點擊鏈接時，控制臺會輸出 【內(nèi)部事件————鏈接被點擊了】
鏈接被點擊了，而不會進(jìn)行跳轉(zhuǎn)。
同時，由于使用了 .stop 修飾符，事件也不會向上層元素冒泡傳播，因此點擊鏈接時不會觸發(fā)外部事件 handleDivClick 方法。

1、如果我們把 .prevent 修飾符去掉，點擊鏈接時會進(jìn)行跳轉(zhuǎn)。說明默認(rèn)行為存在，但是被阻止了。

2、如果把 .stop 修飾符去掉，點擊鏈接時會觸發(fā) handleDivClick 方法。說明點擊事件冒泡了。

這說明了 .prevent 和 .stop 修飾符的區(qū)別，.prevent 可以阻止默認(rèn)行為，.stop 可以阻止冒泡傳播。

默認(rèn)行為指的是元素在觸發(fā)某些事件時，瀏覽器會執(zhí)行的預(yù)設(shè)行為。
例如，當(dāng)用戶點擊一個鏈接時，瀏覽器默認(rèn)會跳轉(zhuǎn)到該鏈接所指定的 URL。當(dāng)用戶提交一個表單時，瀏覽器默認(rèn)會向服務(wù)器發(fā)送表單數(shù)據(jù)并刷新頁面。
這些行為是瀏覽器內(nèi)置的，可以通過 JavaScript 代碼來阻止或修改。

export default {
  onLoad() {
    console.log('頁面加載完成');
  },
  onReady() {
    console.log('頁面初次渲染完成');
  },
  onShow() {
    console.log('頁面展示');
  },
  onHide() {
    console.log('頁面隱藏');
  },
  onUnload() {
    console.log('頁面卸載');
  }
}

// 發(fā)送自定義事件
uni.$emit('myEvent', {data: '自定義事件參數(shù)'});

// 監(jiān)聽自定義事件
uni.$on('myEvent', (data) => {
  console.log('接收到自定義事件', data);
});
這里通過 uni.$emit 發(fā)送了一個名為 myEvent 的自定義事件，
并傳遞了一個參數(shù) {data: '自定義事件參數(shù)'}。在需要監(jiān)聽該事件的地方，
可以使用 uni.$on 方法來監(jiān)聽該事件，并在回調(diào)函數(shù)中處理事件。

<button @click="handleClick">點擊我</button>

methods: {
  handleClick($event) {
    console.log('事件類型', $event.type);
    console.log('事件源', $event.target);
    console.log('當(dāng)前組件', $event.currentTarget);
    console.log('自定義數(shù)據(jù)', $event.detail);
  }
}