[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>