[TOC] #### 1.單擊事件click <div id="hdcms"> <li v-for="(v,k) in comments"> {{v.id}} - {{v.content}} <button @click="remove(v.id)">刪除</button> </li> </div> <script> var app = new Vue({ el: '#hdcms', data: { comments: [ {id: 2, content: 'HDPHP'}, {id: 4, content: 'HDCMS'}, {id: 1, content: '后盾人'}, {id: 3, content: '向軍老師'}, ] }, methods:{ remove(k){ console.log(k); } } }); </script> #### 2.表單提交 <div id="hdcms"> <form action="" @submit="post('hdphp')"> <h1>{{times}}</h1> <button>提交</button> </form> </div> <script> var app = new Vue({ el: '#hdcms', data: { times: new Date() }, methods: { post(num){ alert(num); } } }); </script> #### 3.禁止表單提交 <div id="hdcms"> <form action="" @submit.prevent="post('hdphp')"> <h1>{{times}}</h1> <button>提交</button> </form> </div> <script> var app = new Vue({ el: '#hdcms', data: { times: new Date() }, methods: { post(num){ alert(num); } } }); </script> #### 4.事件修飾符之stop&capture&self實例詳解 <div id="hdcms"> <div id="xy"> <div @click="box" :style="{border:'solid 2px red'}"> <a href="http://houdunwang.com" @click.prevent="links">后盾網</a> </div> </div> 運行結果： //houdunwang.com div <div id="xy"> <div @click="box" :style="{border:'solid 2px red'}"> <a href="http://houdunwang.com" @click.stop.prevent="links">后盾網</a> </div> </div> 運行結果： // houdunwang.com <div id="xy"> <div @click.self="box" :style="{border:'solid 2px red'}"> <a href="http://houdunwang.com" @click.prevent="links">后盾網</a> </div> </div> 運行結果： // houdunwang.com <div id="xy"> <div @click.capture="box" :style="{border:'solid 2px red'}"> <a href="http://houdunwang.com" @click.prevent="links">后盾網</a> </div> </div> 運行結果： //div houdunwang.com </div> <script> var app = new Vue({ el: '#hdcms', data: {}, methods: { box(){ alert('div'); }, links(){ alert('houdunwang.com'); } } }); </script> #### 5.事件修飾符之once實例詳解 once 執行一次，第二次跳轉 <div id="hdcms"> <a href="http://houdunren.com" @click.prevent.once="links">links</a> </div> <script> var app = new Vue({ el: '#hdcms', data: {}, methods: { links(){ alert('houdunwang.com'); } } }); </script> #### 6.鍵盤修飾符的實例講解（ctrl+a） <div id="hdcms"> <input type="text" @keyup.ctrl.65="keyEvent"> </div> <script> var app = new Vue({ el: '#hdcms', data: {}, methods: { keyEvent(){ console.log('hdphp'); } } }); </script> #### 7.鼠標事件處理修飾符實例講解 <div id="hdcms"> <!--鼠標右鍵--> <div :style='style' @contextmenu.prevent="handler"></div> <!--鼠標左鍵--> <div :style='style' @click.left="handler"></div> <!--鼠標中鍵--> <div :style='style' @click.middle="handler"></div> </div> <script> var app = new Vue({ el: '#hdcms', data: { style: {border: "solid 2px red", height: "300px"} }, methods: { handler(){ alert('hdphp'); } } }); </script>