Vue.js 基础学习 v-on 指令

Posted 2020-10-05 胡卓

在前面的基础学习中已经写了v-for和v-bind两个指令

今天学习v-on指令

v-on指令：用来绑定事件的
body中

<div id="app">

</div>

script中

var app = new Vue({
el : ‘#app‘,
methods : {

}
})

在div app中加入一个button并绑定一个点击事件

<button v-on:click="onClick">点我</button>

在js中的methods 中加入一个onClick

methods : {
onClick : function(){
console.log("clicked");
},    //每次添加一个成员就在后面加一个，方便添加新的
}

这时，在浏览器中点击按钮console会打印clicked，绑定click成功
我们还可以同时绑定多个事件

<button v-on=‘{mouseenter:onEnter,mouseleave:onOut}‘ v-on:click="onClick">点我</button>

上面我们通过对象的方式绑定多个事件，对象中的键是事件的名称 值是methods中的成员属性方法

methods : {
onClick : function(){
console.log("clicked");
},
onEnter : function(){
console.log("mouseenter");
},
onOut : function(){
console.log("mouseout");
},
}

这时，在浏览器中将鼠标移入button console会打印mouseenter 移出button console会打印mouseout

在div app中添加一个form 为form绑定一个提交事件

<form v-on:submit="onSubmit">
<input type="text"><br />
<input type="submit" value="提交">
</form>

在method中添加onSubmit

onSubmit:function() {
console.log("submitted");
},

绑定完发现在运行时无法在console中打印出submitted 原因是每次提交页面都会刷新

避免刷新的方法有两种
第一种onSubmit传递参数$event

<form v-on:submit="onSubmit($event)">

然后

onSubmit:function(e) {
e.preventDefault();
console.log("submitted");
},

这样我们就能打印出submitted而不刷新页面了

然而vue为我们提供了更加简单的方法那就是

<form v-on:submit.prevent="onSubmit">

而onSubmit不改动

onSubmit:function() {
console.log("submitted");
},

vue还提供了subnit.stop 用来停止冒泡

keyUp事件也提供了keyUp.enter只有enter按下时才触发

<form v-on:keyUp.enter="onkeyUpenter" v-on:submit.prevent="onSubmit">

在method中添加

onkeyUpenter : function() {
console.log("keyenterpressed");
},

只有按下enter时才会在console中打印

由于v-on很常用所以它也有一个简写方式@如 @click="onClick" @代表v-on:
在用对象同时绑定多个事件时，不能用@代替v-on。