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获取网页中的js、css、Flash等文件
Dec 20 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
js css+html实现简单的日历
Jul 14 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
vue动态配置模板 'component is'代码
Jul 04 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
第十四节 命名空间 [14]
2006/10/09 PHP
smarty中js的调用方法示例
2014/10/27 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
bootstrap table插件动态加载表头
2019/07/19 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python requests模块session代码实例
2020/04/14 Python
QML实现钟表效果
2020/06/02 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
工程项目建议书范文
2014/03/12 职场文书
公司会议策划方案
2014/05/17 职场文书
绘画专业自荐信
2014/07/04 职场文书
党委领导班子整改方案
2014/09/30 职场文书
先进工作者事迹材料
2014/12/23 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
实习介绍信范文
2015/05/05 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
Python数据结构之队列详解
2022/03/21 Python