1.添加事件監聽 v-on
(1)使用v-on指令可以添加事件監聽，語法：
v-on:eventName="fn" 也可以簡寫成 @eventName="fn"
(2)回調函數的參數：$event就是當前觸發事件的元素，即使不傳$event,在回調函數中也可以使用event這個參數
基本使用：
<div id="app">
<button v-on:click="test">點我</button>
<button v-on:click="test2('hello vue')">點我2</button>
<button v-on:click="test3($event)">點我3</button>
<button v-on:click="test4">點我4</button>
</div>
methods: {
test() {
console.log('hi');
},
test2(content) {
console.log(content);
},
test3(event) {
console.log(event.target);
},
test4(){
//即使不傳$event,在回調函數中也可以使用event這個參數
console.log(event.target.innerText);
}
}
其他事件：
<body>
<div id="app">
<!-- 點擊事件 -->
<button @click="testClick">點我</button>
<!-- input事件 -->
<input type="text" @input="testInput">
<!-- change事件 -->
<select @change="testChange">
<option value="020">廣州</option>
<option value="021">上海</option>
</select>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{},
methods:{
testClick(){
console.log('Click')
},
testInput(){
console.log('Input')
},
testChange(){
console.log('Change')
}
}
})
</script>
2.事件修飾符
事件修飾符用來控制事件的冒泡和默認行為，共有2個：
.stop:阻止事件冒泡
.prevent:阻止默認事件
基本使用：
<!-- 阻止事件冒泡 -->
<div id="big" @click="test">
<div id="small" @click.stop="test2"></div>
</div>
<!-- 阻止默認事件，點擊a鏈接不會發生跳轉，只會執行test方法的代碼 -->
<a href="https://www.baidu.com/" @click.prevent="test">百度一下</a>
3.按鍵修飾符
按鍵修飾符用來監聽某個按鍵是否被按下
使用@keyup指令可以為元素添加鍵盤事件，例如：
<!-- 任何按鍵按下都會觸發回調函數 -->
<textarea @keyup="testKeyup" cols="30" rows="10"></textarea>
如果我們想在特定按鍵按下才觸發回調的話就添加按鍵修飾符或按鍵碼，例如：
語法： @keyup.按鍵修飾符=回調函數
語法： @keyup.按鍵碼=回調函數
<!-- 只有回車鍵按下的時候才會觸發回調函數 -->
<!-- 下面的兩種寫法效果是一致的 -->
<!--使用按鍵碼，回車鍵的keyCode是13 -->
<textarea @keyup.13="testKeyup" cols="30" rows="10"></textarea>
<!--使用按鍵修飾符，因為回車鍵比較常用，所以vue為他設置了名稱，可以直接使用enter來代替。 -->
<textarea @keyup.enter="testKeyup" cols="30" rows="10"></textarea>
methods: {
testKeyup() {
console.log('回車鍵被按下了');
}
}
Vue 提供了絕大多數常用的鍵修飾符：
- .enter
- .tab
- .delete (捕獲“刪除”和“退格”鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
其余按鍵可以用按鍵碼
<!--q的keyCode是81，當按下q鍵時會觸發test方法 -->
<input type="text" value="hello" @keyup.81="test">
你可以通過全局 Vue.config.keyCodes.自定義按鍵修飾=按鍵碼，來自定義按鍵修飾符，例如：
//q的keyCode是81
<input type="text" value="hello" @keyup.q="test">
Vue.config.keyCodes.q=81