Vuejs实践--事件绑定

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

事件绑定

v-on：事件绑定的表达式的值可以是js语句，也可以是在methods选项中定义好的方法名(有参数的时候当然需要传参),

在vue事件中，如果要用到事件对象e，要将e作为形参传入函数，并且在执行该函数的时候，传入实参$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;//this表示的是当前的Vue实例
					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 阻止事件冒泡，向上传播;.prevent:阻止默认行为.如点击a标签的链接，会打开目标界面的默认行为；@click.once事件只执行一次等等，此外还有一些键盘事件的修饰符（还是事件），并且修饰符可以叠加。

键盘事件

语法：@keydown.(键位的keyCode或键位别名) = callback

例如：@keydown.13 或者@keydown.enter（别名，回车事件）；@keydown.38或者@keydown.up（别名，按方向键上--事件）；
 自定义键盘事件
全局：Vue.config.keyCodes ={别名：对应的keycode }，然后就可以在键盘事件中按相应的键，就会有反应了。