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去掉字符串里的所有空格
Feb 08 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
详解datagrid使用方法(重要)
Nov 06 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
解析数组非数字键名引号的必要性
2013/08/09 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Vuex 入门教程
2018/01/10 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
python自定义异常实例详解
2017/07/11 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
文员个人求职自荐信
2013/09/21 职场文书
校园广播稿100字
2014/10/06 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
python实现学生信息管理系统(面向对象)
2022/06/05 Python