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 27 Javascript
javascript 节点排序 2
Jan 31 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
详解Vue This$Store总结
Dec 17 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JS实现百度搜索框
Feb 25 Javascript
javascript对象3个属性特征
Nov 17 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+mysql扎实个人基本功
2008/03/27 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JavaScript中Function详解
2015/02/27 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
python实现中文转换url编码的方法
2016/06/14 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
创建Django项目图文实例详解
2019/06/06 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
应届生财务会计求职信
2013/11/05 职场文书
智能电子应届生求职信
2013/11/10 职场文书
学校清明节活动总结
2014/07/04 职场文书
完整版商业计划书
2014/09/15 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
楚门的世界观后感
2015/06/03 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
《分数乘法》教学反思
2016/02/24 职场文书