v-on以及方法methods的定义

简写

v-on:就是用于绑定事件的,其简写为@

例:

<div class="app">
    <button v-on:click="myclick">click me</button>
<button @click="myclick">click me</button>
</div>  

绑定的方法可以写成myclick(),在括号在里面可以添加参数。如没有参数也可以写成myclick。另外这种事件对应的方法定义在vue实例的methods里。

通过json绑定多个方法

<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
</div>  
<div class="app">
    <button v-on:mouseenter='onenter' v-on:mouseleave='leave'>click me</button>
</div>  
<div class="app">
    <button v-on:mouseenter='onenter' v-on:mouseleave='leave' v-on:click="myclick">click me</button>
</div>  
<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
</div>  

当绑定多个事件时,需要传入一个json对象,对象的键名就是事件名,对象的键值就是对应事件要执行的方法。

方法的定义

可以使用

myclick:function(){
                console.log("clicked");
            },

也可以使用

myclick:function(){
                console.log("clicked");
            },

但注意一定要定义在methods里面

 <script>
    var vm = new Vue({
        el:'#app',
        data:
        },
        methods:{
            myclick:function(){
                console.log("clicked");
            },
            leave:{
                console.log("mouseleaved");
            }
       } 
    })
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
最后修改:2020 年 10 月 21 日 12 : 09 AM
如果觉得我的文章对你有用,请随意赞赏