vue 基礎入門筆記 02

click_man發表於2019-08-14

1. 事件修飾符

  • .stop 阻止冒泡

  • .prevent 阻止預設事件

  • .once 只執行一次

  • .self 只當事件在元素本身時觸發

  • .capture 新增事件偵聽器時使用事件捕獲模式


<!DOCTYPE  html>

<html  lang="en">

<head>

<meta  charset="UTF-8">

<meta  name="viewport"  content="width=device-width, initial-scale=1.0">

<meta  http-equiv="X-UA-Compatible"  content="ie=edge">

<title>Document</title>

<script  src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

<div  id="app">

<div  @click='divClickHandler'  style="width: 200px;height:200px;background-color:red">

div

<!-- .stop 阻止冒泡 -->

<!-- 只執行btnClickHandler divClickHandler被阻止了 -->

<button  @click.stop='btnClickHandler'>按鈕</button>

</div>

<div  @click='divClickHandler'  style="width: 200px;height:200px;background-color:red">

div

<!-- 阻止預設事件 -->

<!-- href 跳轉失效 -->

<a  href="http://www.baidu.com"  @click.prevent='linkClick'>百度</a>

</div>

<div  @click.captrue='divClickHandler'  style="width: 200px;height:200px;background-color:red">

div

<!-- 實現捕獲觸發事件機制 -->

<!-- 先執行divClickHandler 在執行btnClickHandler -->

<button  @click='btnClickHandler'>按鈕</button>

</div>

<!-- 只執行一次 -->

<a  href="http://www.baidu.com"  @click.prevent.once='linkClick'>百度</a>

</div>

<script>

let  vm = new  Vue({

el:"#app",

data:{

\

},

methods: {

// div點選事件

divClickHandler(){

console.log('點選了div')

},

// 按鈕點選事件

btnClickHandler(){

console.log('點選了btn')

},

//阻止預設事件

linkClick(){

console.log("link click")

}

},

})

</script>

</body>

</html>

相關文章