vue事件之vm.$on事件和v-on事件

最新推荐文章于 2024-06-21 08:47:39 发布

星辰志

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量2.7k

点赞数 2

本文链接：https://blog.csdn.net/jaquechen/article/details/102557718

版权

vm.$on: 看vue官网对vm.$on事件的理解是：它监听当前实例上的自定义事件。事件可以有vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

v-on：vue官网对其用法的描述是，绑定事件的监听器。事件类型有参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性:v-on:click="handle('ok',$event)".
从2.4.0开始，v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，时不支持任何修饰器的。

从中我们可以看出v-on远比$on强大的多，对v-on的定义是绑定事件的监听器，即v-on的可用状态的前提时有相应的绑定事件这样v-on才能监听，而$on不需要绑定，它监听的是当前实例上的所有自定义事件，注意：是自定义事件，而且此事件可以使用v-$emit触发。让我们写个v-on的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>
            {{Listen}}{{total}}
        </div>
        <button v-on:click="total +=1">
            监听DOM
        </button>
        <button v-on:click="firstFun">
            作为方法处理器，监听事件
        </button>
        <!-- <button v-on:[event]="firstFun">
                作为动态事件
        </button> -->
        <input type="text" v-on:[event]="firstFun" :placeholder="changeFunName" />
        <button @click="changFun">
            改变动态事件的动态参数{{count}}
        </button>
        <button v-on:click="secondFun('hello',$event)">内联语句</button>
        <button v-on="{ mousedown:mouseFist,mouseup:mouseSecond}">
            对象语法
        </button>
        <span>点击鼠标执行{{countTotal}}次</span>
        <span>释放戍边执行{{countTotalTwo}}次</span>
    </div>
</body>
    <script>
        let test = new Vue({
            el:'#test',
            data:{
                Listen:'可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码',
                total:0,
                event:"click",
                count:0,
                changeFunName:"作为动态事件",
                countTotal:0,
                countTotalTwo:0,
            },
            methods:{
                firstFun(){
                    document.write('我出现了');
                },
                secondFun(val){
                    alert(val+"正所谓低调的事情弄高调也就成为大师了!vue另立独行的内联语句我实在不懂！我的理解就是嵌套在页面内的js事件监听没别的了");
                },
                mouseFist(){
                    this.countTotal++
                },
                mouseSecond(){
                    this.countTotalTwo++
                },
                changFun(){
                    this.count+=1
                    if(this.count === 1){
                        this.event = "click";
                        this.changeFunName = "click事件";
                    }else if(this.count === 2){
                        this.event = "focus";
                        this.changeFunName = "focus事件";
                    }else if(this.count === 3){
                        this.event = "change";
                        this.changeFunName = "change事件";
                    }else if(this.count === 4){
                        this.event = "blur";
                        this.changeFunName = "blur事件";
                    }else if(this.count === 5){
                        this.event = "keydown";
                        this.changeFunName = "keydown事件";
                    }else if(this.count > 5){
                        this.count = 0
                    }
                },
            }
        })            
    </script>
</html>

我们在来写点vm.$on的例子以作对比

星辰志

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue事件之vm.$on事件和v-on事件

vm.$on: 看vue官网对vm.$on事件的理解是：它监听当前实例上的自定义事件。事件可以有vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。v-on：vue官网对其用法的描述是，绑定事件的监听器。事件类型有参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发...
复制链接

扫一扫