事件監聽
事件監聽即元素的響應函數。前面提到的methods就是用來寫響應函數的。
語法：v-on:
語法糖：@
基本使用
基本使用，其實只要在需要響應的元素上寫v-on:響應類型=‘響應函數名’就可以了。響應類型一般是js固定的，如click,input等
參數傳遞
- 事件監聽並且不需要傳參數的時候可以省略()
- 響應函數需要傳一個參數但是調用時沒加()，默認傳event對象。如果加了()但沒傳參數，則形參爲undefined
- 如果需要手動傳遞event對象，則傳遞參數$event
<body>
<div id="app">
<!-- 事件監聽並且不需要傳參數的時候可以省略() -->
<!-- 需要傳一個參數但是沒加()，默認傳event對象。如果加了()但沒傳參數，則形參爲undefined-->
<button @click="increment">+</button>
<!-- 如果需要傳遞event對象，則傳遞參數$event -->
<button @click="decrement('decrement',$event)">-</button>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
counter: 0
},
methods:{
increment(name){
console.log('========',name);
},
decrement(name,event){
console.log('========',name,event);
}
}
})
</script>
</body>
v-on修飾符
這裏先補充一下冒泡的概念冒泡是指點擊了A事件但B包含A，則B事件也會被觸發。比如某個div包含了button，此時點擊button，div的點擊事件也會被觸發
<body>
<div id="app">
<!-- 冒泡是指點擊了A事件但B包含A，則B事件也會被觸發
如下:點擊了button，div的點擊事件也會觸發-->
<!-- <div @click="divclick"> -->
<!-- <button @click="butclick">點我</button> -->
<!-- </div> -->
<div @click="divclick">
<!-- .stop修飾符停止冒泡 -->
<button @click.stop="butclick">點我</button>
</div>
<form action="baidu">
<!-- <input type="submit" value="提交" @click="submitclick">-->
<!-- .prevent修飾符 攔截默認事件 -->
<input type="submit" value="提交" @click.prevent="submitclick">
</form>
<!-- .{keycode|keyAlias} 監聽某個鍵盤的鍵帽,即只有點擊了此鍵帽纔會有響應 -->
<input type="text" @keyup.enter="keyupEnter">
<!-- .once修飾符 只進行一次回調 -->
<input type="button" value="點我啊" @click.once="onceclick">
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods:{
divclick(){
console.log('==========divclick');
},
butclick(){
console.log('==========butclick');
},
submitclick(){
console.log('==========submitclick');
},
keyupEnter(){
console.log('[email protected]只有按了回車纔會響應');
},
onceclick(){
console.log('==========onceclick');
}
}
})
</script>
</body>
.stop 停止冒泡
.prevent 攔截默認事件
.{keycode|keyAlias} 監聽某個鍵盤的鍵帽
.once 只會執行一次回調函數