VUE指令-事件綁定v-on
能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。javascript
v-on:eventhtml
| <!-- 格式v-on:keycode="方法(參數)" -->vue <div style="height: 150px;background: #CCC;margin: 5px;">java <div style="font-size: 20px;">app v3.v-on:keycode="方法(參數)"</div>ide <hr />ui <div>spa <div>code <input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input>htm </div> </div> </div>
<!-- 格式v-on:click="方法(參數)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-on:click="方法(參數)"</div> <hr /> <div> <div> <button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button> </div> </div> </div>
<!-- 格式v-on:click="方法" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.格式v-on:click="方法"</div> <hr /> <div> <div> <button v-on:click="add" style="font-size: 20px;">onClick</button> </div> </div> </div>
<!-- 格式v-on:click="表達式" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-on:click="表達式"</div> <hr /> <div> <div> <button v-on:click="count ++" style="font-size: 20px;">onClick</button> <p>{{count}}</p> </div> </div> </div> |
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script> <title>v-on</title> </head> <body style="height: 100%;"> <style> .style0{ font-size: 25px; color: green; } .style1{ background: gold; } </style> <!-- VUE指令v-on事件綁定指令 REF: http://www.runoob.com/vue2/vue-events.html https://cn.vuejs.org/v2/guide/events.html --> <div id="appVue"> <!-- 格式v-on:keycode="方法(參數)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v3.v-on:keycode="方法(參數)"</div> <hr /> <div> <div> <input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input> </div> </div> </div> <!-- 格式v-on:click="方法(參數)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-on:click="方法(參數)"</div> <hr /> <div> <div> <button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="方法" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.格式v-on:click="方法"</div> <hr /> <div> <div> <button v-on:click="add" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="表達式" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-on:click="表達式"</div> <hr /> <div> <div> <button v-on:click="count ++" style="font-size: 20px;">onClick</button> <p>{{count}}</p> </div> </div> </div> </div> <script> new Vue({ el: "#appVue", data: { count:999 }, methods:{ add:function(){ console.log("onClick") }, mod:function(var0,var1){ console.log(var0); console.log(var1); }, commit:function(){ console.log("commit"); } } } ) </script> </body> </html>
REF:
- 1. vue指令和事件綁定
- 2. vue事件綁定處理
- 3. vue的事件綁定
- 4. Vue組件綁定自定義事件
- 5. VUE指令-數據綁定v-model
- 6. 前端學習03-Vue-指令-單向綁定&雙向綁定
- 7. vue中父子組件綁定事件
- 8. vue組件綁定原生事件
- 9. 事件綁定
- 10. 綁定事件
- 更多相關文章...
- • WSDL 綁定 - WSDL 教程
- • ASP.NET Web Forms - 數據綁定 - ASP.NET 教程
- • Docker 清理命令
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vue指令和事件綁定
- 2. vue事件綁定處理
- 3. vue的事件綁定
- 4. Vue組件綁定自定義事件
- 5. VUE指令-數據綁定v-model
- 6. 前端學習03-Vue-指令-單向綁定&雙向綁定
- 7. vue中父子組件綁定事件
- 8. vue組件綁定原生事件
- 9. 事件綁定
- 10. 綁定事件