前端应用_Vue_Vue常见的指令v-on事件绑定机制

最新推荐文章于 2023-03-21 17:19:15 发布

上海_彭彭

最新推荐文章于 2023-03-21 17:19:15 发布

阅读量646

点赞数

分类专栏： Vue.js 文章标签： vue v-on

本文链接：https://blog.csdn.net/qq_34979346/article/details/98506195

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

上一节 v-bind 是属性绑定，如果是方法就需要用v-on 。

如果咱们想触发一个 alert(“hello”)事件，如果不用vue 写，就需要以下的操作：

先找到 dom
var btn=document.getElementById(“btn”)
然后写一个触发函数如下
btn.οnclick=function(){alert(“hello”)}

小伙伴该说了，那如何才能屏蔽操作dom 呢，直接用方法呢？

答：就用 v-on 绑定事件机制

看下下边的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<div id="pp">

    <input type="button" :value=value :title=title+'123' v-on:click="show">

</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    message: 'Hello,Vue',
                    message2:'<h1>我是一个超大的head，请避让下</h1>'    ,
                    title:'我是一个可以点击的button',
                    value:'SAVE',
                },
                methods:{//这个 methods 属性中定义了 当前vue 实例所有可用的方法

                    show: function () {
                        alert("hello")
                    }
                }
            }
        )
    </script>

</div>
</body>
</html>

点击save 是可以弹出的，这就是 vue 的强大，不要关心 dom 。

总结：

1.这个 methods 属性中定义了当前vue 实例所有可用的方法
2. 用v-on 做事件绑定，目的让vue 在methods 里找到这个属性，并执行
3. 用在click 事件里. v-on:click , v-on:mouseover 等

上海_彭彭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_Vue常见的指令v-on事件绑定机制

上一节 v-bind 是属性绑定，如果是方法就需要用v-on 。如果咱们想触发一个 alert(“hello”)事件，如果不用vue 写，就需要以下的操作：先找到 domvar btn=document.getElementById(“btn”)然后写一个触发函数如下btn.οnclick=function(){alert(“hello”)}小伙伴该说了，那如何才能屏蔽操作...
复制链接

扫一扫

专栏目录