Vue.js 基礎學習 v-on 指令

在前面的基礎學習中已經寫了v-for和v-bind兩個指令

今天學習v-on指令

v-on指令：用來綁定事件的
body中

<div id="app">

</div>

script中

var app = new Vue({
el : '#app',
methods : {

}
})

在div app中加入一個button並綁定一個點擊事件

<button v-on:click="onClick">點我</button>

在js中的methods 中加入一個onClick

methods : {
onClick : function(){
console.log("clicked");
},    //每次添加一個成員就在后面加一個，方便添加新的
}

這時，在瀏覽器中點擊按鈕console會打印clicked，綁定click成功
我們還可以同時綁定多個事件

<button v-on='{mouseenter:onEnter,mouseleave:onOut}' v-on:click="onClick">點我</button>

上面我們通過對象的方式綁定多個事件，對象中的鍵是事件的名稱 值是methods中的成員屬性方法

methods : {
onClick : function(){
console.log("clicked");
},
onEnter : function(){
console.log("mouseenter");
},
onOut : function(){
console.log("mouseout");
},
}

這時，在瀏覽器中將鼠標移入button console會打印mouseenter 移出button console會打印mouseout

在div app中添加一個form 為form綁定一個提交事件

<form v-on:submit="onSubmit">
<input type="text"><br />
<input type="submit" value="提交">
</form>

在method中添加onSubmit

onSubmit:function() {
console.log("submitted");
},

綁定完發現在運行時無法在console中打印出submitted 原因是每次提交頁面都會刷新

避免刷新的方法有兩種
第一種onSubmit傳遞參數$event

<form v-on:submit="onSubmit($event)">

然后

onSubmit:function(e) {
e.preventDefault();
console.log("submitted");
},

這樣我們就能打印出submitted而不刷新頁面了

然而vue為我們提供了更加簡單的方法那就是

<form v-on:submit.prevent="onSubmit">

而onSubmit不改動

onSubmit:function() {
console.log("submitted");
},

vue還提供了subnit.stop 用來停止冒泡

keyUp事件也提供了keyUp.enter只有enter按下時才觸發

<form v-on:keyUp.enter="onkeyUpenter" v-on:submit.prevent="onSubmit">

在method中添加

onkeyUpenter : function() {
console.log("keyenterpressed");
},

只有按下enter時才會在console中打印

由於v-on很常用所以它也有一個簡寫方式@如 @click="onClick" @代表v-on:
在用對象同時綁定多個事件時，不能用@代替v-on。