v-on指令，給元素綁定事件：

為事件綁定簡單表達式：

<div id="test">
　　<input v-on:click="counter+=1" type="button" value="點我"/>
　　<p>按鈕被點了{{counter}}次</p>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　counter : 0
　　　　}
　　});
</script>

為事件綁定方法：

<div id="test">
　　<input v-on:click="sayHi" type="button" value="點我彈出一個提示"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayHi : function(){
　　　　　　　　alert("你好呀！");
　　　　　　}
　　　　}
　　});
</script>

可以向為事件綁定的方法中傳入參數：

<div id="test">
　　<input v-on:click="sayMyName(‘傻屌‘)" type="button" value="名字"/>
　　<input v-on:click="sayMyAge(24)" type="button" value="年齡"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayMyName(name){
　　　　　　　　alert(name);
　　　　　　},
　　　　　　sayMyAge(age){
　　　　　　　　alert(age);
　　　　　　}
　　　　}
　　});
 
</script>

可以向為事件綁定的方法中傳入原始DOM事件：

<div id="test">
　　<input v-on:click="sayMyValue($event)" type="button" value="我的值"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayMyValue(event){
　　　　　　　　if(event){
    　　　　　　　　alert(event.target.value);
　　　　　　　　}else{
    　　　　　　　　alert("沒傳進來");
　　　　　　　　}
　　　　　　}
　　　　}
　　});
</script>

v-on指令可以被簡寫為@：

<div id="test">
　　<input @:click="sayMyValue($event)" type="button" value="我的值"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayMyValue(event){
　　　　　　　　alert(event.target.value);
　　　　　　}
　　　　}
　　});
</script>

常用的事件：

事件修飾符：（將常用的操作提取出來，提供相應簡寫）

按鍵修飾符：（將常用的鍵盤值對應行為提取出來，提供相應簡寫）

VUE - 基礎語法（事件、表單）