vue点击click事件解析

最新推荐文章于 2024-10-10 11:02:42 发布

xuxinwen32

最新推荐文章于 2024-10-10 11:02:42 发布

阅读量9.9w

点赞数 7

分类专栏：前端文章标签： vue点击click事件解析

本文链接：https://blog.csdn.net/xuxinwen32/article/details/85329539

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

vue算是前端技术比较火的一门技术了，所以在日常开发当中掌握它还是比较重要的，最近要用vue做一个移动端项目，趁着空闲的时间来简单的写一下demo，希望能够帮到大家：

废话不多说，先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="./vue.js"></script>-->
    <script src="2.5.20-vue.js"></script>
</head>
<body>
<div id="app">


     //@click点击事件getMethod和getMethod()带不带小括号其实没多大的区别，vue在底层会把传过去的函数统一解析成为方法，带小括号说明有相应的实参传入方法体里面；
    <!--<p   @click="getMethod">aaaa</p>-->       
    <!--<p   @click="getMethodFun">aaaa</p>-->

    <p   @click="getMethod()">aaaa</p>
    <p   @click="getMethodFun()">bbbb</p>

</div>

</body>
<script>

    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'father',
                show: true
            };
        },

        methods: {
            getMethod () {      //点击事件的时候去寻找相应的方法，在底层做转换直接写方法名，大括号里面写相应的业务逻辑
                console.log('11');
            },
 //也可以采用匿名函数的写法定义方法名，然后进行调用这种方法也是可以的，只不过getMethod ()的写法更加简洁，但是在实际开发当中这个可是不支持的例如   aaFunc (){}         //直接这样写是会报错的，一定要注意;
            getMethodFun: function () {   
                console.log('22')
            }
        },

    });
</script>
</html>

简单分析到这里，希望能帮到大家，大家也可以追一下vue的源码进行分析；