VUE - 基础语法（事件）

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>

 

事件修饰符，常用操作的简写形式：

v-on:事件名.prevent：阻止标签默认行为

<form id="test" action="test.html">
　　<!--只写修饰符，阻止了跳转-->
　　<a v-on:click.prevent href="http://www.baidu.com">跳转1</a>
　　<!--写了修饰符并绑定事件，阻止了跳转并执行该事件-->
　　<a v-on:click.prevent="sayLink" href="http://www.baidu.com">跳转2</a>
　　<!--只写修饰符，阻止了提交-->
　　<input v-on:click.prevent type="submit" value="提交1"/>
　　<!--写了修饰符并绑定事件，组织了提交并执行该事件-->
　　<input v-on:click.prevent="sayBtn" type="submit" value="提交2"/>
</form>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayLink : function(){
　　　　　　　　alert("跳转");
　　　　　　},
　　　　　　sayBtn : function(){
　　　　　　　　alert("提交");
　　　　　　}
　　　　}
　　});
</script>

v-on:事件名.passive：告诉浏览器，事件绑定的方法中不会阻止浏览器的默认行为

补充：Chrome为addEventListener加入这个属性，是想要优化页面的滑动性能，这个特性只支持mousewheel/touch相关的事件。

注意：.passive和.prevent从意思上看是完全相反的，如果同时设置了这两个修饰符，.prevent的行为会被忽略并得到了浏览器发出的黄牌警告，所以不要一起用啦。

v-on:事件名.once：该事件只能被触发一次

<div id="test">
　　<p v-on:click="sayLove">不停说爱我</p><!--点几次弹出几次-->
　　<p v-on:click.once="sayLove">说一次爱我</p><!--只能弹一次，后来就不好使啦-->
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　obj : {},
　　　　methods : {
　　　　　　sayLove : function(){
　　　　　　　　alert("爱你呦");
　　　　　　}
　　　　}
　　});
</script>

与事件执行顺序相关的修饰符：

 

按键修饰符，常用键值的简写形式：

回车：.enter
TAB键：.tab
删除和退格：.delete
ESC键：.esc
空格：.space
向上：.up
向下：.down
向左：.left
向右：.right
ALT键：.alt
CTRL键：.ctrl
SHIFT键：.shift
MAC中的COMMOND/WIN中的WINDOWS：.meta