vue-事件处理

1 点击事件绑定

定义一个容器，将容器和vue实例绑定，在容器中定义点击事件，在实例对象中定义出对应方法。

<body>

    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <button v-on:click="showInfo">点我提示信息</button> 
      <!-- 当点击button元素时，就去找名为showInfo去调用 -->
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示

      
        new Vue({
        el:'#root',
        data:{
        name:'爪哇开发'
        },
        methods: {
            showInfo(){
            alert('同学你好')
        }
        }

        })
        
    </script>

运行打开后： 

 那这个时候，大家知道showInfo中的event就是事件对象

 那this中是只的什么呢？

 打开之后发现：this代指vue对象 

那如何去验证它呢，可以判断vue对象和this是否相等。下图可看是相等的。

 如何在vue点击的时候，进行传参呢？

在后面加上括号，传值即可

 那这个showInfo1和showInfo2最终会在哪呢？它们最终也会在我们的vue对象中，

 2 总结

1 事件的基本使用：

        1）使用v-on：xxx或@xxx绑定事件，其中xxx是事件名称

        2）事件的回调需要配置在methods对象中，最终会在vm上

        3）methods中配置的函数，不要用箭头函数！否则this就不是VM了

        4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

        5）@click=“demo”和@click=“demo（$event）”效果一致，但后者可以传参。

 

posted @ 2022-09-27 16:34  小猪不会叫  阅读(15)  评论(0)    收藏  举报  来源