Vue中事件绑定
vue事件绑定
·
事件绑定
-
使用v-on来绑定事件,也可以使用简写方法,例如v-on:click可以直接写成@click。
<button @click="n">1.点击获取名字</button>
-
事件的方法是写到实例对象的mothds对象中。
例如: methods:{ fun1(){ alert("事件触发了"); }, }
-
在方法中不能使用箭头函数,否则this的指向将不会当前的实例对象,而是window。
-
可以写成@click或者@click(实参),如果需要传参就写第二种。
-
事件修饰符: (1).prevent:阻止默认事件,例如可以阻止a标签的跳转 (2).stop:阻止事件的冒泡 (3).capture:使用事件捕获的方式获取数据 (4).once:事件只能触发一次 (5).self:只有event.target是当前操作的元素时才触发事件 (6).passive:使事件立即执行,不用等待事件回调函数执行完毕
例如: <a href="http://www.baidu.com" @click.prevent="fun1">百度</a> //会阻止a标签的默认跳转
-
键盘事件: (1).使用键盘别名的方式:例如 @keydown.enter,这里就是按下回车键触发的事件,可以使用keydown或者keyup都行。
例如: <input type="text" placeholder="按下回车键确认输入" @keydown.tab="fun1">
(2)要注意特别的按键,比如系统修饰键:ctrl、alt、shift、win键等,都只用在keydown的情况下才能正常触发,在使用keyup的时候需要按下的同时在按下其他键,然后在松开其他键,事件才能出触发。 (3).使用键码的去指定按键,例如回车键的键码是13,我们可以用@keydown.13的方法去使用。
例如: <input type="text" placeholder="按下键盘确认输入" @keydown.13="fun1">
(4).自定义按键别名,在script中写入:Vue.config.keyCodes.自定义别名=键码,这样就可以使用自定义的别名了。
例如: Vue.config.keyCodes.hhh=13
更多推荐
已为社区贡献2条内容
所有评论(0)