(6).v-on指令：事件綁定
寫法： <元素 v-on:事件名=“處理函數名(實參值)”>
簡寫：<元素 @事件名=“處理函數名(實參值)”， 如果處理函數不需要實參值，則()可省略: <元素 @事件名=“處理函數名”
示例1：點哪個div，喊哪個div疼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app>div{
width:300px;
height:150px;
}
#d1{
background-color:red
}
#d2{
background-color:green;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="d1" @click="say('d1')"></div>
<div id="d2" @click="say('d2')"></div>
</div>
<script>
new Vue({
el:"#app",
methods:{
//dname形參可接受點擊div時傳過來的字符串div名
say(dname){
alert(`${dname} 疼!`)
}
}
})
</script>
</body>
</html>
運行結果
如果只獲取事件對象，不需要傳入其他實參值時
示例2：vue中獲得鼠標點擊位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app>div{
width:300px;
height:150px;
}
#d1{
background-color:red
}
#d2{
background-color:green;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="d1" @click="say"></div>
<div id="d2" @click="say"></div>
</div>
<script>
new Vue({
el:"#app",
methods:{
//當單擊div時，顯示鼠標點擊的位置
//自動創建event,自動傳入事件處理函數第一個參數
// ↓
say( e ){
alert(`x:${e.offsetX}, y:${e.offsetY}`)
}
}
})
</script>
</body>
</html>
既想用事件對象，又要傳入自定義實參值
-
手動使用vue提供的$event關鍵詞代替e，手動傳參。
-
$event: vue自動封裝的保存DOM事件對象的一個特殊關鍵詞，可用於傳參！
//當事件發生時, vue會自動封裝"DOM事件對象e" <元素 @事件名="處理函數($event, 實參值)"> methods:{ 處理函數(e, 形參1){ //e得到的就是DOM中的事件對象，用法也和DOM中一樣 } }
強調: 處理函數中$event與實參值的位置沒有固定順序，但是必須和methods中處理函數定義中的形參列表順序保持一致！
示例3：點擊按鈕，既獲得div名字，又獲得鼠標點擊位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app>div{
width:300px;
height:150px;
}
#d1{
background-color:red
}
#d2{
background-color:green;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="d1" @click="say('d1', $event)"></div>
<div id="d2" @click="say('d2', $event)"></div>
</div>
<script>
new Vue({
el:"#app",
methods:{
say(dname,e){
alert(`點在${dname}的x:${e.offsetX}, y:${e.offsetY}位置`)
}
}
})
</script>
</body>
</html>
運行效果：
東哥筆記