vue-事件处理

最新推荐文章于 2024-07-30 10:27:19 发布

想养一只萨摩耶～

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量578

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_50652600/article/details/127052044

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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）”效果一致，但后者可以传参。

想养一只萨摩耶～

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue-事件处理

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）”效果一致，但后者可以传参。
复制链接

扫一扫

专栏目录