Vuejs实践--事件绑定

Vue中的事件绑定一般通过v-on指令来绑定事件：

事件绑定

v-on：事件绑定的表达式的值可以是js语句，也可以是在methods选项中定义好的方法名(有参数的时候当然需要传参),对于某一个方法，默认会将原生事件对象event传入(可以认为是内置的参数，就像手机内置的应用一样,不用声明也一样存在);

HTML部分

<div id="container"><!-- js表达式 --><span>{{initNum}}</span><button @click="initNum++">点我加一</button><!-- 函数名 --><span>{{initNum}}</span><button @click="addTen(10,$event)">点我加十</button><!-- 函数名 --><span>{{initNum}}</span><button @click="addTwo">点我加二</button><a href="www.baidu.com" @click="goto('禁止打开',$event)" >百度一下</a></div>

Javascript部分

var myApp = new Vue({el:"#container",data:{userName:"张三",initNum:10,},methods:{addTen:function(plus,event){this.initNum+=plus;console.log(event.preventDefault());window.alert(this.initNum)},addTwo:function(){this.initNum+=2;console.log(event)},goto:function(message,event){event.preventDefault();window.alert(message);console.log(event)}}})

事件修饰符
当然，事件也有自己的修饰符，这里不不再一一举例（有很多），但是基本用法要清楚：
就是在@事件名后加一个点"."跟上修饰符即可，例如@click.stop 阻止事件冒泡，@click.once事件只执行一次等等，此外还有一些键盘事件的修饰符（还是事件）