0.前言
需求：用戶點擊按鈕，現實瀏覽器彈窗。
1.基礎寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<!-- 制作一個容器 -->
<div id="first">
<div>
測試數據
</div>
<button v-on:click="showMsg">點我彈出信息</button>
</div>
<script type="text/javascript">
new Vue({
el:'#first',
data:{
msg:"world",
},
methods:{
showMsg(){
alert("顯示信息")
}
}
})
</script>
</body>
</html>
click事件默認用v-on:click。后面跟函數名。函數具體內容要寫在vue的methods中。效果如下：
可以看到正常彈出。
2.簡寫
實際上除了上面的
<button v-on:click="showMsg">點我彈出信息</button>一般還寫成下面這種形式，而且使用范圍比上面更廣。
<button @click="showMsg">點我彈出信息</button>3.事件傳參
有的時候，我們點擊某個按鈕或者其他地方時，需要傳遞參數（比如點擊表格的某一行或者列）。那么我們就要通過點擊事件click 來傳遞參數。
比較簡單的直接寫參數形式（一般很少這么用）：
<body>
<!-- 制作一個容器 -->
<div id="first">
<div>
測試數據
</div>
<button @click="showMsg('hello')">點我彈出信息</button>
</div>
<script type="text/javascript">
new Vue({
el:'#first',
data:{
msg:"world",
},
methods:{
showMsg(e){
alert(e)
}
}
})
</script>
</body>
效果如下：
第二種是比較常用的傳參方式:
<!-- 制作一個容器 -->
<div id="first">
<div>
測試數據
</div>
<button @click="showMsg($event)">點我彈出信息</button>
</div>
<script type="text/javascript">
new Vue({
el:'#first',
data:{
msg:"world",
},
methods:{
showMsg(e){
console.log(e)
}
}
})
</script>
說明：實際項目中用的比較多大是點擊table中的一些特定列或者行觸發事件，這個時候要攜帶的信息一般是行信息或者是列信息。
4.常見的事件修飾符
prevent:阻止默認事件
stop：阻止事件冒泡
once:事件只觸發一次
capture:使用事件的捕獲模式
self：只有event.target是當前操作元素時才觸發
passive:事件的默認行為立即執行，無需等待事件回調執行完畢用法及說明:
以prevent為例，比如一個a標簽，本職工作是點擊后跳轉，如果你在click后面加上prevent就會阻止它默認的跳轉工作。
可以參考下面代碼：
<a href="http://www.baidu.com" @click.prevent="showbaidu">去百度</a>
什么是事件冒泡？
所謂事件冒泡就是多個組件嵌套，觸發內層組件，會一一觸發外層組件。
比如下面這樣：
<body>
<!-- 制作一個容器 -->
<div id="first">
<div>
測試數據
</div>
<div @click="showMsg($event)">
<button @click="showMsg($event)">點我彈出信息</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#first',
data:{
msg:"world",
},
methods:{
showMsg(e){
alert("好好的")
}
}
})
</script>
</body>
我們在原來click上加上stop就可以了
<div @click="showMsg($event)">
<button @click.stop="showMsg($event)">點我彈出信息</button>
</div>其余的用的不算多，需要的話可以自行百度。