v-on指令

v-on就是用于绑定事件的
例如:有个按钮,当点击的时候执行一些操作

上述代码中,v-on:后面的值是一个方法,可以写成myclick(),没有参数可以写成myclick
另外这种事件对应的方法不是定义在data选项中,而是定义在vue实例的methods选项中,里面都是一个一个的function

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        myclick:function(){
            console.log(111111);
        }
    }
});

v-on也可以绑定多个事件
多个事件可以单独多个v-on绑定

也可以使用一个v-on,里头用对象的形式书写,对象的键名就是事件名,对象的键值就是对应事件要执行的方法。多个事件之间通过,分开

当然也可以混合使用

但是需要注意,在vue实例中方法一定要有,不然就报错。

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        myclick:function(){
            console.log("clicked");
        },
        onenter:function(){
            console.log("mouseented");
        },
        leave:function(){
            console.log("mouseleaved");
        }
    }
});

例子:在绑定form表单中的提交事件时

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        onSubmit:function(e){
            e.preventDefault();
            //阻止浏览器的默认行为,因为在表单提交的时候,浏览器会默认发送一个get或者post请求到指定页面,刷新整个页面。
            console.log("onSubmited");
        }
    }
});

注意:
$eventvue里面的事件对象,vue能认识
在表单提交的时候,浏览器会默认发送一个get或者post请求到指定页面,刷新整个页面。阻止浏览器的默认行为,可以用事件对象e.preventDefault()

但像上述form表单提交的这种浏览器默认事件,每次都要写e.preventDefaul()其实还是比较麻烦。vue中可以更好的解决,只要在事件的后面添加一个prevent修饰符即可,表示阻止默认事件

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        onSubmit:function(){
            console.log("onSubmited");
        }
    }
});

绑定事件中,除了prevent修饰符,还有stop,表示停止冒泡事件

另外,当绑定的事件是keyupkeypresskeydown键盘事件时,当需要判断按下是回车时。
在以前我们需要判断事件对象的keyCode,虽然功能特别简单,但是每次去写还是特别麻烦。所以对应也有修饰符,如enter修饰符,表示按键是enter键

v-bind一样,v-on也非常常用,对应也有快捷方式:
**v-on:事件名** 可以简写为 **@事件名**

以上就是v-on指令的基本使用!

You may also like...