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的blockui插件显示弹出层
Apr 14 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
vue插件实现v-model功能
Sep 10 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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/26 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
验房委托书
2014/08/30 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
销售2014年度工作总结
2014/12/08 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL