v-on基本用法

Posted 2020-11-25 bushui

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

示例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

 

v-on传值

情况一：methods的方法有参数，传值

<button @click="msg(‘lhs‘)">传值</button>

methods:{
    msg(event){
        console.log(event);//输出的lhs
    }
}

注意：@click="msg(‘lhs‘)"传值时必须加上单引号，不加就传data里的参数

情况二：methods的方法有参数，但没有传值

<button @click="msg">传值</button>

methods:{
    msg(event){
        console.log(event);//输出的event
    }
}

返回的是event（Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态）

情况三：methods的方法有参数，传值同时也要event

<button @click="msg(‘lhs‘,$event)">传值</button>

methods:{
    msg(name,event){
        console.log(naem);//lhs
        console.log(event);//event
    }
}

 

v-on的事件修饰符

（1）stop：停止冒泡

<div @click="upthis">
    aaa
    <!-- 阻止事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
</div>

（2）prevent：阻止默认行为

<form action=‘baidu‘>
    <!-- 提交事件不再重载页面（不会跳转页面） -->
    <input @click.prevent="doThat">
</form>

（3）capture

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

（4）once：只会触发一次

<!-- 点击事件将只会触发一次，防止重复提交 -->
<a v-on:click.once="doThis"></a>

（5）监听某个键盘的键帽

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

（6）修饰符可以串联

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>