vue 函数调用加括号与不加括号的区别


Posted in Javascript onOctober 29, 2020

写在前面:最近做的一个项目用是很久之前的,在维护项目中就无法使用vue等技术来操作,所以一些方法用的是原生来写的,在绑定点击方法时,方法名没加括号,就没生效,加了括号就生效了,当时有疑惑的点是在之前做vue的项目中,我记得不加括号也是完全可以的,于是就详细的查了一下。

原生方法调用函数

在script里写方法,不加括号的话就相当于得到的是这个函数体,是这个函数本身,并不会执行函数

<body>
  <div>函数调用是否要加括号</div>
  <button>点击变色</button>
  <script type="text/javascript">
   var div = document.getElementsByTagName('div')[0];
   var btn = document.getElementsByTagName('button')[0];
 
    function reset(){
      div.style.color='green'
    }
    btn.onclick = reset //1.这种情况相当于 btn.onclick = function reset(){...} ,点击之后执行这个事件。得到是函数体
    btn.onclick = reset() //2.这种情况可以理解成给函数外面加了括号成了自执行函数,不用点击就得到了一个函数执行后面的结果
 
  </script>
</body>

当然以上两种大家都明白,不会有什么疑惑,用习惯vue中的方法调用时和再用原生遇到的疑惑的点在于在行内加方法,

vue 函数调用加括号与不加括号的区别

<div>函数调用是否要加括号</div>
  <button onclick="reset()">点击变色</button>
  <script type="text/javascript">
   var div = document.getElementsByTagName('div')[0];
   var btn = document.getElementsByTagName('button')[0];
 
    function reset(){
      div.style.color='green'
    }

在原生的行内加方法时是要加()才能执行的 具体原因,哈哈,我想多了会把自己绕进去,欢迎你们解答

vue方法中调用函数

这个其实加不加括号,这个方法都会执行,加()我一般会考虑到传参的问题,

  • 不加括号,默认传递参数为 MouseEvent,
  • 加括号,括号中使用$event, 才能获取到MouseEvent,不过我们这种加括号的情况,一般是传自己需要的参数

欢迎指正~

本文作者: 张尊娟

本文链接:https://www.cnblogs.com/wszzj/p/13895908.html?utm_source=tuicool&utm_medium=referral

以上就是vue 函数调用加括号与不加括号的区别的详细内容,更多关于vue 函数调用的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
javascript打印输出json实例
Nov 11 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
动态加载js文件简单示例
Apr 21 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
JavaScript实现随机点名小程序
Oct 29 #Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 #Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 #Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 #Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 #Javascript
微信小程序实现可长按移动控件
Nov 01 #Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
使用adodb lite解决问题
2006/12/31 PHP
php zend 相对路径问题
2009/01/12 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
python实现文法左递归的消除方法
2020/05/22 Python
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
环境科学专业个人求职信
2013/09/26 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
会议活动邀请函
2014/01/27 职场文书
统计岗位职责
2014/02/21 职场文书
2014年计生工作总结
2014/11/21 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python