vue-事件处理机制

最新推荐文章于 2022-12-30 09:33:54 发布

玲玲酱

最新推荐文章于 2022-12-30 09:33:54 发布

阅读量597

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45758587/article/details/109750800

版权

本文介绍了Vue框架中的事件处理机制，包括事件的三个要素——事件目标、事件处理程序和事件对象。详细讨论了事件流的捕获和冒泡阶段。接着阐述了Vue中事件绑定的三种方式：直接操作变量、调用函数以及传递参数。最后提到了Vue的事件修饰符，它允许开发者更方便地处理DOM事件，使得事件处理函数专注于数据逻辑，避免直接操作DOM。

摘要由CSDN通过智能技术生成

事件三要素：

事件目标，事件处理程序，事件对象

事件流：

默认情况下，先进行事件捕获（从外到内读取），然后进行事件冒泡（从内向外执行）

事件绑定：

1）直接操作变量

<body>
    <div id="app">
        {
  {num}}
        <button v-on:click='num++'>num</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'lisi',
                num:0
            },
            methods:{}
        })
    </script>
</body>

2）调用一个函数

<body>
    <div id="app">
        {
  {num}}
        <button v-on:click='handler'>num</button>
    </div>
    <script>
        // app实例对象能够获取和操作 data/methods中的实例变量
        var app=new Vue({
            el:'#app',
            data:{
                name:'lisi',

最低0.47元/天解锁文章

玲玲酱

关注

0
点赞
踩
0

收藏

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

事件三要素：事件目标，事件处理程序，事件对象事件流：默认情况下，先进行事件捕获（从外到内读取），然后进行事件冒泡（从内向外执行）事件绑定：1）直接操作变量<body> <div id="app"> {{num}} <button v-on:click='num++'>num</button> </div> <script> ne.
复制链接

扫一扫

专栏目录