從開始到現在,我們的範例都是real time即時執行,但是一般網站幾乎都不是real time即時執行的,尤其是希望那些透過網友點擊才會出現互動的內容,本篇我們就來談談v-on這個屬性吧!v-on呢其實就有點類似jquery的on(),所以就會有click、submit、keyup等等這些延伸設定,我們假設畫面上有一個按鈕,按鈕按下後會跳出文字框,以下是範例程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<input type="submit" value="立即送出" v-on:click="clickme">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app',
methods:{
clickme: function(){
alert("here I am!");
}
}
});
</script>
</body>
</html>
是的,當你點擊了立即送出後,透啟動v-on:click屬性,屬性值是clickme,所以就會呼叫下方methods裡面clickme的function內容,然後你就會看到文字視窗內容顯示“here I am!”,當然有些人會說這個範例有點弱,我用javascript一樣做得到,當然!vue.js本身就是javascript 的 framework,所以javascript本來就可以辦得到,那我們來改造一下這個範例,讓頁面會統計你點擊這個按鈕次數,做一個小小的計數器,以下是修改過後的範例!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<p>目前以點擊:{{count}}次</p>
<input type="submit" value="立即送出" v-on:click="clickme">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
count:0
},
methods:{
clickme: function(){
this.count += 1;
}
}
});
</script>
</body>
</html>
只要稍加修改,加上前幾篇教過的data,就可以做出一個簡單的計數器了!這邊要記得count這裡直接0的話,型別判斷就是數字,但是如果你寫'0',就會被當文字型別,最後的結果就不是你想要計數器了!
好啦!最後再來一個簡單的click範例,這個範例就是假設我們有兩顆按鈕,分別按下去都會跳出不一樣的文字視窗,但是文字視窗的訊息不寫在methods裡面的function裡,而是共用相同的function,所以簡單說就是要可以丟參數進去function裡,以下就是範例!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<button v-on:click="handleIt('uh')">I say uh</button>
<button v-on:click="handleIt('ah')">you say ah</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app',
methods:{
handleIt: function(msg){
alert(msg)
}
}
});
</script>
</body>
</html>
是的!根據這個範例呢,你也可以在那邊uh~~~ah~~~(這是某首DJ的歌,有點老了),當你點了"I say uh",v-on:clicke就會呼叫handleIt function,然後把uh這個值丟到handleIt function裡,所以alert出來的內容就會變成“uh”,當然當你點了“you say ah”,就會把ah這個值丟入handleIt function中,最後alert出來的內容就會變成“ah”了!
由於v-on還有其他運用方式,要講的東西有點多,所以下一篇我們還是會繼續講v-on的其他用法,所以如果這一篇還不是很了解,建議多練習幾次範例,不然下一篇可能會更不懂喔!當然有問題你也可以在下方留言或上粉絲團、社團一起討論喔!