文章目錄
v-on基礎用法
（1）作用：綁定事件監聽器
（2）縮寫（語法糖）：@
（3）預期：function 、Inline Statement、Object
基本用法示例
<body>
<div id="app">
<h2>{{count}}</h2>
<button v-on:click="count--">-</button>
// 使用方法 ，使用語法糖
<button @click='add()'>+</button>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
add() {
this.count++;
}
}
})
</script>
</body>
v-on參數
注意：
（1）如果該方法不需要額外的參數，那麼方法後的()可以不寫
但是注意：如果方法本身中就有一個參數，那麼會默認將原生事件event參數傳遞進去
（2）如果需要同時傳入某個參數，同時需要event時，可以通過 $event 傳入事件
v-on參數示例
具體細節註釋中都有提到
<body>
<div id="app">
//<!-- 1、事件調用的方法沒有參數 -->
<button @click="btn1">按鈕一</button>
<button @click='btn1()'>按鈕二</button>
//<!-- 2、在事件定義時，寫方法時省略了小括號，但是方法本身是需要一個參數的
// 這個時候Vue會默認地將瀏覽器生成地event事件對象作爲參數傳入到方法中
<button @click="btn2(12)">按鈕三</button>
//<!-- undefined -->
<button @click="btn2()">按鈕四</button>
<button @click="btn2">按鈕五</button>
//<!-- 3、在我們方法定義時，我們需要event對象，同時有需要其他參數-->
//<!-- 不加小括號時，event事件對象會傳給第一個參數，而方法的第二個參數（本應是event事件對象）卻爲undefined -->
<button @click="btn3">按鈕六</button>
//<!-- 這裏會認爲event是一個變量，若沒有event變量會報錯 -->
<button @click="btn3(12,event)">按鈕七</button>
// <!-- 在調用方法時，使用$手動地獲取到瀏覽器的event事件對象 -->
<button @click="btn3(12,$event)">按鈕八</button>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
event:12
},
methods:{
btn1() {
console.log('我是按鈕一');
},
btn2(a) {
console.log(a);
},
btn3(a,event) {
console.log(a,event);
}
}
})
</script>
</body>
v-on參數修飾符
.stop修飾符的使用
.stop修飾符的使用 調用event.stopPropagation()
以下示例若不加 .stop 修飾符，將會出現點擊按鈕時也會
<body>
<div id="app">
//<!-- 阻止冒泡 -->
<div @click='div'>
<span>點我才觸發div點擊事件</span>
<button @click.stop='btn'>按鈕</button>
</div>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
methods:{
btn() {
console.log("btn");
},
div() {
console.log("div");
}
}
})
</script>
</body>
.prevent修飾符的使用
prevent修飾符的使用 調用event.preventDefault()
<body>
<div id="app">
<form action="baidu">
// <!-- 阻止默認事件 -->
<input type="submit" value="提交" @click.prevent="submit">
</form>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
methods:{
submit() {
console.log("我提交了");
}
}
})
</script>
</body>
[keyCode(編碼)|keyAlias（簡寫）] 的使用
[keyCode(編碼)|keyAlias（簡寫）] 只當事件是從特定鍵觸發時才觸發回調
<body>
<div id="app">
<!--3 -->
<input type="text" @keyup="keyUp">
<input type="text" @keyup.enter="keyUp">
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
methods:{
keyUp() {
console.log("keyUp");
}
}
})
</script>
</body>
.once 的使用
.once 只觸發一次回調
<body>
<div id="app">
<button @click.once ='one'>只觸發一次</button>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
methods:{
one() {
console.log("one");
}
}
})
</script>
</body>
