v-on 綁定事件
1.可以用'v-on'指令監(jiān)聽(tīng) DOM 事件
2.'v-on'中要處理的邏輯比較復(fù)雜貌嫡，因此不支持直接在'v-on'中直接寫(xiě)js代碼，但支持方法，內(nèi)聯(lián)處理缕粹，和對(duì)象的形式(2.4.0+ 支持)
2.1.著重說(shuō)明不支持在'v-on'中寫(xiě)js代碼指的是:
<button v-on:click="alert('a')">v-on按鈕</button>
如果這么寫(xiě)必須是在vue實(shí)例對(duì)象的method中有定義alter方法才行，否則不支持js的alert使用纸淮。
3.'v-on' 的縮寫(xiě)是@符號(hào)
v-on -- 方法處理器和內(nèi)聯(lián)處理器
1.兩者區(qū)別寫(xiě)法上平斩，帶不帶括號(hào)
2.兩者區(qū)別參數(shù)上，方法處理由于沒(méi)有括號(hào)不支持傳參但只帶event咽块，內(nèi)聯(lián)由于帶括號(hào)支持傳參绘面，但必須$evnet 當(dāng)參數(shù)傳入才有evet事件。
方法處理器
1.使用的時(shí)候不帶括號(hào)就是方法處理案例:<button v-on:click="doThis"></button>
2.下面案例是根據(jù)官方我自己延伸案例侈沪，很巧妙的配內(nèi)聯(lián)函數(shù)法處理揭璃，實(shí)現(xiàn)的效果當(dāng)點(diǎn)button時(shí)候觸發(fā)了evet事件，進(jìn)入if判斷中亭罪，然后執(zhí)瘦馍，在這就可以更加明確的看出內(nèi)聯(lián)和方法的區(qū)別，自帶evet事件和傳參區(qū)別行应役，完畢后接著執(zhí)行下個(gè)alert 彈出框情组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<button v-on:click="doThis">v-on按鈕</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
// es6 語(yǔ)法
doThis(){
if (event) {
alert(event.target.tagName)
}
alert('我是方法處理器')
}
},
})
</script>
</body>
</html>
內(nèi)聯(lián)處理器
1.使用的時(shí)候帶括號(hào):
<button v-on:click="doThat('hello，'$ event)"</button>
2.帶括號(hào)的好處是可以傳參箩祥，但不自帶evet 事件呻惕，想使用event事件需要$event參數(shù)傳入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<button v-on:click="doThat('hello', $event)">v-on按鈕</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
// es6 語(yǔ)法
doThat(parameter, event){
let msg = parameter + "內(nèi)聯(lián)方法";
if (event) {
alert(event.target.tagName)
}
alert(msg);
}
},
})
</script>
</body>
</html>
參考文章
v-on -- 對(duì)象處理(2.4+)
1.根據(jù)官方api介紹滥比，在2.4.0+版本已經(jīng)開(kāi)始提供可以傳入對(duì)象的寫(xiě)法亚脆，這種寫(xiě)法
的好處是什么，參考下面同一個(gè)功能實(shí)現(xiàn)盲泛，在這之前的寫(xiě)法和現(xiàn)在的寫(xiě)法濒持。
2.之前寫(xiě)法: <p @mouseover ="doTish" @mouseout ="doThat">對(duì)象形式</p>
3.現(xiàn)在寫(xiě)法: <p v-on="{ mouseover: doTish, mouseout: doThat }">對(duì)象形式</p>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<p v-on="{ mouseover: doTish, mouseout: doThat }">對(duì)象形式</p>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
doTish(){
event.target.style.color = "red";
},
doThat(){
event.target.style.color = "#0f0";
},
},
})
</script>
</body>
</html>
v-on:keyup -- 監(jiān)聽(tīng)按鍵觸發(fā)
1.有時(shí)候想根據(jù)鍵盤(pán)/鼠標(biāo)上的按鍵觸發(fā)指定的功能這時(shí)候需要keyup
2.配合keyup 有兩種第一種直接使用按鍵別名，第二種使用定義按鍵序號(hào)位置
3.常見(jiàn)的按鍵別名:
'.enter'
'.tab'
'.delete'(捕獲“刪除”和“退格”鍵)
'.esc'
'.space'
'.up'
'.down'
'.left'
'.right'
4.按鍵序號(hào)網(wǎng)址查詢:'http://www.cnblogs.com/wuhua1/p/6686237.html'
5如果想全局配置且使用別名的方式建議這種全局書(shū)寫(xiě)配置:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
6.組件按鍵使用：
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
7.規(guī)定組合按鍵順序('exact')：
<!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
<button @click.ctrl.exact="onCtrlClick">A</button>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<!--鼠標(biāo)點(diǎn)擊+ctrl 才能觸發(fā)-->
<p @click.ctrl.exact ="doTish">對(duì)象形式</p>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
doTish(){
event.target.style.color = "red";
},
},
})
</script>
</body>
</html>
事件修飾符
1.事件修飾符可以解決到點(diǎn)擊事件自身帶的一些事件效果
'.stop' -- 阻止事件冒泡
'.prevent' -- 阻止默認(rèn)事件
'.capture' -- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式
'.self' --只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)
'.once' --事件只觸發(fā)一次
阻止事件冒泡 -- stop
1.多個(gè)元素嵌套,有層次關(guān)系,這些元素都注冊(cè)了相同的事件,如果里面的元素事件觸
發(fā)了寺滚，外面的元素的該事件自動(dòng)的觸發(fā)了柑营，注意相同事件(都是點(diǎn)擊事件，中點(diǎn)擊
叫做事件)
2.事件冒泡從里向外
3.阻止事件冒泡使用stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.inner{
width: 200px;
height: 200px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="inner" id="app" @click="divClick">
<input type="button" value="點(diǎn)擊" @click.stop="inputClick">
</div>
<script>
var vm = new Vue({
el:'#app',
// data 負(fù)責(zé)輸出理數(shù)據(jù)的
data:{
},
// methods 負(fù)責(zé)處理調(diào)用方法的
methods:{
divClick(){
console.log("最外層div")
},
inputClick(){
console.log("最內(nèi)層div")
}
}
})
</script>
</body>
</html>
- 點(diǎn)擊按鈕效果:
最外層div
實(shí)現(xiàn)捕獲觸發(fā)事件的機(jī)制 -- capture
1.冒泡是從向外依次觸發(fā)村视，使用capture官套，就變成了從先顯示外面，在顯示里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.inner{
width: 200px;
height: 200px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="inner" id="app" @click.capture="divClick">
<input type="button" value="點(diǎn)擊" @click="inputClick">
</div>
<script>
var vm = new Vue({
el:'#app',
// data 負(fù)責(zé)輸出理數(shù)據(jù)的
data:{},
// methods 負(fù)責(zé)處理調(diào)用方法的
methods:{
divClick(){
console.log("最外層div")
},
inputClick(){
console.log("最內(nèi)層div")
}
}
})
</script>
</body>
</html>
- 打印結(jié)果
最外層div
最內(nèi)層div
只會(huì)阻止自己身上冒泡行為 -- self
1.只會(huì)阻止自己身上冒泡行為 ,當(dāng)有多層嵌套的時(shí)候，只會(huì)阻止有self 冒泡行為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.inner{
width: 200px;
height: 200px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div id="app">
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
</div>
<script>
// 創(chuàng)建 Vue 實(shí)例奶赔，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('這是觸發(fā)了 inner div 的點(diǎn)擊事件')
},
btnHandler() {
console.log('這是觸發(fā)了 btn 按鈕 的點(diǎn)擊事件')
},
div2Handler() {
console.log('這是觸發(fā)了 outer div 的點(diǎn)擊事件')
}
}
});
</script>
</body>
</html>
- 打印結(jié)果
這是觸發(fā)了 btn 按鈕 的點(diǎn)擊事件
這是觸發(fā)了 outer div 的點(diǎn)擊事件
阻止默認(rèn)事件 -- prevent
1.例如a標(biāo)簽?zāi)J(rèn)事件就是點(diǎn)擊跳轉(zhuǎn)頁(yè)面惋嚎，為了阻止a標(biāo)簽的默認(rèn)事件觸發(fā)我
們綁定的事件，可以使用prevent
2.圖片的默認(rèn)事件禁止拖拽站刑，如果想給圖片設(shè)置拖拽效果的話記得做阻止默
認(rèn)行為
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
// data 負(fù)責(zé)輸出理數(shù)據(jù)的
data:{},
// methods 負(fù)責(zé)處理調(diào)用方法的
methods:{
linkClick:function () {
alert(1)
}
}
})
</script>
</body>
</html>
- 運(yùn)行的效果
1.a標(biāo)簽不會(huì)頁(yè)面跳轉(zhuǎn)另伍，反而點(diǎn)擊后會(huì)彈出彈窗顯示1
只觸發(fā)一次默認(rèn)行為
1.只觸一次規(guī)定的默認(rèn)行為
2.下面的案例第二次點(diǎn)擊就會(huì)跳轉(zhuǎn)頁(yè)面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導(dǎo)入Vue cdn 的網(wǎng)址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
// data 負(fù)責(zé)輸出理數(shù)據(jù)的
data:{},
// methods 負(fù)責(zé)處理調(diào)用方法的
methods:{
linkClick:function () {
alert(1)
}
}
})
</script>
</body>
</html>
