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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
vue首次渲染全过程
Apr 21 Vue.js
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
php遍历目录viewDir函数
2009/12/15 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
基于Python实现文件大小输出
2016/01/11 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
企业新年寄语
2014/04/04 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
娱乐节目策划方案
2014/06/10 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
质量承诺书格式范文
2015/04/28 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
青少年法制教育心得体会
2016/01/14 职场文书