标签：ati 键盘 div col class function 常用 UNC 基础语
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>
常用的事件：
事件修饰符：（将常用的操作提取出来，提供相应简写）
按键修饰符：（将常用的键盘值对应行为提取出来，提供相应简写）
标签：ati 键盘 div col class function 常用 UNC 基础语
原文地址：https://www.cnblogs.com/lynshxs/p/9897697.html
