vue笔记之methods中函数固定参数$event/事件方法

责编:menVScode 2017-09-29 22:37 阅读(946)

参数$event打印结果如下图,切记传参少了$符号不然会报错的:

<div id="app">
	<button @click='button($event)'>按钮</button>
	<!-- 有一个参数是固定的:$event -->
</div>
 
<script>
	new Vue({
		el:'#app',
		methods:{
			button:function(event){
				event.target.style.color = 'red'
				console.log(event)
			}
		}
	})
</script>


QQ截图20170929220301


path:Array[6]
    0:button
    1:div#app
    2:body
    3:html
    4:document
    5:Window


<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!--只触发一次-->
vue2.1新增
<a v-on:click.once="doThis"></a>

全部的按键别名:

@keyup.enter=" " //点击enter触发事件
    .tab
    .delete (捕获 “删除” 和 “退格” 键)
    .esc
    .space
    .up
    .down
    .left
    .right

2.1.0 新增
    .ctrl
    .alt
    .shift
    .meta


标签: $event
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码