## v-on指令 **縮寫：** @ **類型：** Function | Inline Statement **參數：** event (required) **修飾符：** - .stop - 調用 event.stopPropagation()。 - .prevent - 調用 event.preventDefault()。 - .capture - 添加事件偵聽器時使用 capture 模式。 - .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。 - .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。 - .native - 監聽組件根元素的原生事件。 - .once - 只觸發一次回調。 - .left - (2.2.0) 只當點擊鼠標左鍵時觸發。 - .right - (2.2.0) 只當點擊鼠標右鍵時觸發。 - .middle - (2.2.0) 只當點擊鼠標中鍵時觸發。 - .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器 **用法：** 綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。 用在普通元素上時，只能監聽 原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。 在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個 $event **屬性： **v-on:click="handle('ok', $event)"。 >[info]示例 ~~~ <!-- 方法處理器 --> <button v-on:click="doThis"></button> <!-- 內聯語句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 縮寫 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默認行為 --> <button @click.prevent="doThis"></button> <!-- 阻止默認行為，沒有表達式 --> <form @submit.prevent></form> <!-- 串聯修飾符 --> <button @click.stop.prevent="doThis"></button> <!-- 鍵修飾符，鍵別名 --> <input @keyup.enter="onEnter"> <!-- 鍵修飾符，鍵代碼 --> <input @keyup.13="onEnter"> <!-- 點擊回調只會觸發一次 --> <button v-on:click.once="doThis"></button> ~~~ 在子組件上監聽自定義事件（當子組件觸發 “my-event” 時將調用事件處理器）： ~~~ <my-component @my-event="handleThis"></my-component> <!-- 內聯語句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 組件中的原生事件 --> <my-component @click.native="onClick"></my-component> ~~~ >[success]代碼示例1 點擊下面兩個按鈕，都能彈出1。 ~~~ <div id="box"> <input type="button" value="按鈕1" onclick='alert(1)' /> <input type="button" value="按鈕2" v-on:click='show()' /> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(){//方法 alert(1); } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on1.html ----- >[info]代碼示例2 ~~~ <div id="box"> <input type="button" value="按鈕1click" v-on:click='add()' /> <input type="button" value="按鈕2mouseover" v-on:mouseover='add()' /> <input type="button" value="按鈕3mouseout" v-on:mouseout='add()' /> <input type="button" value="按鈕4mousedown" v-on:mousedown='add()' /> <input type="button" value="按鈕5mouseup" v-on:mouseup='add()' /> <input type="button" value="按鈕6dblclick" v-on:dblclick='add()' /> <hr /> <ul> <li v-for='value in arr'> {{value}} </li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { arr:['apple','banana','orange','pear'] }, methods:{ add:function(){//方法 this.arr.push('tomato') } } }) </script> ~~~ 用v-on 給每個按鈕分別添加不同的事件，來向數組追加元素。 >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on2.html 效果演示：  >[success]代碼示例3 縮寫 ~~~ <div id="box"> <input type="button" value="按鈕" v-on:click="show()"/> <input type="button" value="按鈕" @click="show()"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(){ alert(1) } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on3.html --- >[success]代碼示例4 事件對象 ~~~ <div id="box"> <input type="button" value="按鈕" v-on:click="show()"/> <input type="button" value="按鈕" @click="show($event)"/> <input type="button" value="按鈕" @click="show($event,12)"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev,b){ alert(ev.clientX); alert(b) } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on4.html --- >[success]代碼示例5 事件冒泡 ~~~ <div id="box"> <div @click="show2()"> <input type="button" value="按鈕" @click="show($event)"/> <input type="button" value="按鈕" @click.stop="show2()"/> </div> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(1); ev.cancelBubble=true;//阻止事件冒泡 }, show2:function(){ alert(2) } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on5.html >[success]代碼示例6 默認行為 ~~~ <div id="box"> <input type="button" value="按鈕" @contextmenu="show($event)"/> <input type="button" value="按鈕" @contextmenu.prevent="show()"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(1); ev.preventDefault();//阻止默認行為 } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on6.html --- >[success]代碼示例7 鍵盤事件1 ~~~ <div id="box"> <input type="text" value="按鈕" @keydown="show($event)"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(ev.keyCode) } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on7.html --- >[success]代碼示例8 鍵盤事件2 ~~~ <div id="box"> <input type="text" value="按鈕" @keyup="show($event)"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(ev.keyCode) } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on8.html ---- >[success]代碼示例8 鍵盤事件3 ~~~ <div id="box"> <input type="text" value="按鈕" @keyup.13="show()"/> <input type="text" value="按鈕" @keyup.enter="show()"/> <input type="text" value="按鈕" @keyup.up="show()"/> <input type="text" value="按鈕" @keyup.down="show()"/> <input type="text" value="按鈕" @keyup.left="show()"/> <input type="text" value="按鈕" @keyup.right="show()"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(){ alert("你按回車了") } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on9.html