一、v-on事件綁定
-
v-on指令
用於綁定事件 -
v-on用法
-
直接綁定事件：
注意：
- 綁定的事件是對應的方法不是定義在data里面，而是定義在vue實例的methods里
- 綁定的函數可直接綁定函數名——fun，也可以直接調用函數——fun()
@事件名="方法" =>
@click="onClick"v-on:事件名="方法" =>
v-on:click="onClick"methods:{ onClick:function(){ console.log('onClick') } } -
綁定事件類：
注意： 當綁定多個事件時，需要傳入一個對象，對象的鍵名就是事件名，對象的鍵值就是對應事件要執行的方法。注意在vue實例中方法一定要有，不然就報錯。
v-on="{事件:方法}" =>
v-on="{mouseenter:onEnter,mouseout:onOut}"methods:{ onEnter:function(){ console.log("onEnter") }, onOut:function(){ console.log("onOut") }, } -
阻止默認形為其一（提交時刷新）
v-on:事件="方法($event)" =>
@submit="onSubmit($event)"methods:{ onSubmit:function(e){ e.preventDefault(); console.log("onSubmit") } }注意： $event是vue里面的事件對象，vue能認識。在表單提交的時候，瀏覽器會默認發送一個get或者post請求到指定頁面，刷新整個頁面。所以要阻止瀏覽器的默認行為，可以用事件對象
e.preventDefault(); -
阻止默認形為其二（提交時刷新）
注意： 阻止form表單提交的這種瀏覽器默認事件，其實vue也想到了，並它封裝好了，只要在事件的后面添加一個
.prevent修飾符，表示阻止默認事件。v-on:事件.行為="方法" =>
@submit.prevent="onSubmit2"注： 綁定事件中，除了prevent阻止默認事件，還有stop,表示停止冒泡事件。
@submit.stop="onSubmit2"methods:{ onSubmit2:function(){ console.log("onSubmit2") } } -
鍵盤事件（最好配合阻止默認行為一起使用）
注： 當我們綁定的事件是keyup、keypress、keydown鍵盤事件時，而且需要判斷按下是回車時。vue也想到了這點，只需要在鍵盤事件后面添加一個.enter修飾符即可。
v-on:事件.鍵值="方法" =>
@keyup.enter="onEnter"methods:{ onKeyup:function(){ console.log("onKeyup") } }
-
二、v-on例子
<div id="app">
<div v-text="num"></div>
<div>
<button v-on:click='num++'>加1</button>
<button @click='add'>@加1</button>
<button @click='sub()'>@減1</button>
<button v-on:click='sub'>減1</button>
</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
num:0
},
methods:{
//vue的函數必須定義在vue的methods屬性之中
add:function(){
//這里this指向就是當前Vue的實例對象vm
console.log(this === vm);
//Vue的實例對象可直接使用data中的數據
this.num++;
},
sub:function(){
console.log(this === vm);
this.num--;
}
}
})
</script>
三、事件函數參數傳遞
-
調用函數與傳遞事件對象
v-on:click="方法(value,$event)"注意： 當要傳遞事件對象時，必須將它放在實參最末位。並且事件對象的名字是固定的，只能是
$event。- 例子：
<div id="app"> <div v-text="num"></div> <div> <button @click='event(11,22,$event)'>@加1</button> </div> </div> <script src="./js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ num:0 }, methods:{ event:function(para1,para2,e){ console.log(para1,para2); console.log(e); console.log(e.target.tagName); console.log(e.target.innerHTML); }, } }) </script> -
綁定函數名與傳遞事件對象
v-on:click="方法名"注意： 綁定函數名的方法默認首個形參就是事件對象
$event。methods:{ fun:function(event){ } }- 例子：
<div id="app"> <div v-text="num"></div> <div> <button @click='event'>事件調用</button> </div> </div> <script src="./js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ num:0 }, methods:{ event:function(e){ console.log(e); console.log(e.target.tagName); console.log(e.target.innerHTML); } } }) </script> -
總結
事件綁定-參數傳遞：
- 如果事件直接綁定函數名稱，那么默認會傳遞事件對象作為事件函數的第一個形式參數。
- 如果事件綁定函數調用，那么事件對象必須作為最后一個參數顯性傳遞，並且事件函數傳遞的實際參數名稱必須為
$event。