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

標籤：常用   cti   col   put   為我   滑鼠   efault   color   vue.js   

在前面的基礎學習中已經寫了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。

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