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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
js同源策略详解
May 21 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 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
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python调用百度API实现人脸识别
2020/11/17 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
经典演讲稿开场白
2014/08/25 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
关于幸福的感言
2015/08/03 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
python process模块的使用简介
2021/05/14 Python
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android