内容简介：用事件修饰符有基本的6种使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
<div id="test">
<button @click="sayHi('你好')">说你好</button> <!--这里使用@-->
<button @click="sayHi('我被点击了')">说我被点击了</button> <!--这里使用@-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el: '#test',
methods: { //这里使用methods
sayHi: function (message) {
alert(message)
}
}
})
</script>
二、vue访问原生 DOM 事件
用 $event
获取
<button @click="changeColor('你好',$event)">点击我</button> <!--这里使用@-->
<div style="height: 100px;width: 100px;background-color: red;" @mouseover="over('鼠标从我上面滑过',$event)">
鼠标从我上面滑过试试
</div>
<script type="text/javascript">
var myVue = new Vue({
el: '#test',
methods: { //这里使用methods
changeColor: function (message, event) {
alert(message+event); //弹出我被点击了,事件是[object MouseEvent]
},
over :function (message, event) {
alert(message+event); //弹出鼠标从我上面滑过,事件是[object MouseEvent]
}
}
})
</script>
三、事件修饰符
事件修饰符有基本的6种
.stop阻止事件冒泡
<a v-on:click.stop="doThis"></a>
.prevent阻止默认事件
<form v-on:submit.prevent="onSubmit"></form>
.capture时间捕获（从上到下）
<div v-on:click.capture="doThis">...</div>
.self只在元素自身回调
<div v-on:click.self="doThat">...</div>
.once只触发一次
<a v-on:click.once="doThis"></a>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 `@click.prevent.self
会阻止所有的点击，而
@click.self.prevent` 只会阻止元素上的点击
四、键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
<div id="app">
{{msg}}
<input type="text" v-on:keydown="ke"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"事件处理",
counter:0
},
methods:{
ke:function(e){
if(e.keyCode == 13){
this.msg = e.target.value;
e.target.value = "";
}
}
}
});
</script>
enter tab delete esc space up down left right
我们也可以通过全局 config.keyCodes
对象自定义键值修饰符别名
Vue.config.keyCodes.f1 = 112
、
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件
- React 事件和 Dom 事件
- react事件系统之事件触发
- JS 中的自定义事件和模拟事件
- Flex 事件分发(FlexViewer事件机制)剥离过程
- 事件社交网络：深度用户模型的内容事件推荐
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
C和C++代码精粹
阿林森 / 董慧颖 / 人民邮电出版社 / 2003-4-1 / 59.00
《C和C++代码精粹》基于作者备受好评的C/C++ User Journal杂志上的每月专栏，通过大量完全符合ISO标准C++的程序集合，说明了C++真正强大的威力，是C和C++职业程序员的实践指南。可以帮助有一定经验的C和C++程序员深入学习这两种密切相关的语言，对书中代码的参悟和应用，可以帮助他们从根本上提高使用程序的效率。一起来看看 《C和C++代码精粹》 这本书的介绍吧!
