vue中的v-on等一些知识点

最新推荐文章于 2022-02-07 00:26:06 发布

文鼎鼎

最新推荐文章于 2022-02-07 00:26:06 发布

阅读量351

点赞数

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

本文链接：https://blog.csdn.net/killbee365/article/details/105998652

版权

本文介绍了Vue中的事件处理，包括v-on用于绑定事件，以及v-on的事件修饰符如.stop、.prevent、.capture、.self和.once的用法。通过示例展示了如何阻止事件冒泡、防止默认行为、使用事件捕获模式以及限制事件处理函数的触发次数。

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

Vue中离不开事件，而事件还有一些事件修饰符来约束事件的触发
在网上结合一些别人的知识梳理一下。

首先简单实例化一下

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            mytitle:"This is a title!"
        },
    })
</script>

html代码：

<input type="button" value="按钮" title="mytitle">

我们都知道如果不加v-bind的话mytitle只会被当做一个普通字符串，不会再vue实例上寻找对应的属性
我们改成这样就可以成功调用vue实例中的属性：

<input type="button" value="按钮" v-bind:title="mytitle">

v-bind的语法糖可以简写成冒号：

<input type="button" value="按钮" :title="mytitle">

v-on绑定事件
vue不想jQuery那样操作真实DOM，
以往我们触发事件需要这样操作：

<input type="button" value

关注

专栏目录