vue当中的事件处理

最新推荐文章于 2022-12-10 14:50:34 发布

向阳菌

最新推荐文章于 2022-12-10 14:50:34 发布

阅读量282

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_68997646/article/details/127469963

版权

1.绑定监听v-on

最简单的一个绑定监听的事件

<body>
    <div id="root">
        <h1>my name is {{name}}</h1>
        <button v-on:click="showInfo">click me</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip=false   //阻止vue在启动时生成生产提示
        new Vue({
            el:'#root',
            data:{
                name:'laozhichi'
            },
            methods:{
                showInfo(){
                    alert('i love liulijaun')
                }
            }
        })
        
    </script>

2.我们一定要明白：在methods当中调用函数的时候，这时候函数的this是指向函数的，也就是函数的event是发生事件的那个对象

例如下列有这些代码：

    <script type="text/javascript">
        Vue.config.productionTip=false   //阻止vue在启动时生成生产提示
        new Vue({
            el:'#root',
            data:{
                name:'laozhichi'
            },
            methods:{
                showInfo(event){
                    console.log(event.target.innerText);
                }
            }
        })
        
    </script>

输出如下所示：

在上述这些代码当中，this是指向vue的实例对象的，但是不能写成这个样子：

            methods:{
                showInfo:(event)=>{
                    console.log(this);
                }
            }

因为箭头函数是指向window的

3.v-on绑定事件监听的简写符号使用@符号，也就是

记住跟v-bind简写成冒号：的方式不同哈

<button @click="showInfo">click me</button>

4.函数也可以直接传参

示例：

    <script type="text/javascript">
        Vue.config.productionTip=false   //阻止vue在启动时生成生产提示
        new Vue({
            el:'#root',
            data:{
                name:'laozhichi'
            },
            methods:{
                showInfo(number){
                    console.log(number);
                }
            }
        })
        
    </script>

这时候在鼠标点击事件之后就会输出：

但是有一个问题就是我们在往函数当中传参的时候，其实已经把事件本身对应的对象给覆盖了，那么如果防止丢失呢，在这里就要使用关键词$event啦

例如可以这样子传入参数

    <script type="text/javascript">
        Vue.config.productionTip=false   //阻止vue在启动时生成生产提示
        new Vue({
            el:'#root',
            data:{
                name:'laozhichi'
            },
            methods:{
                showInfo($event,number){
                    console.log(event.target.innerText);
                    console.log(number);
                }
            }
        })
        
    </script>