详解详解Vue之事件处理之事件处理
主要介绍了Vue之事件处理的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可
以了解下。
在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如
有不足之处,还请指正。
监听事件监听事件
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。如下所示:
<button v-on:click="counter += 1">Add 1</button>
<p>按钮被点击了 {{ counter }} 次.</p>
其中counter为Vue自定义的一个属性值。
事件处理方法事件处理方法
事实上,许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一
个需要调用的方法名称。如下所示:
<button v-on:click="greet">Greet</button>
greet 是在下面定义的方法名。如下所示:
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
msg:'hello world!!!',
counter:0,
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods:{
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
},
}
});
</script>
内联处理器中的方法内联处理器中的方法
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法,如下所示:
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:
<button v-on:click="warn('表单不能被提交.', $event)">提交</button>
其中say,warn均为自定义方法,如下所示:
say: function (message) {
alert(message);
},
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault();
}
alert(message);
}
事件修饰符事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实