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接受和处理xml数据的代码(.net)
Mar 28 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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&amp;java(二)
2006/10/09 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
python实现周期方波信号频谱图
2018/07/21 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python dumps和loads区别详解
2020/02/04 Python
python基于opencv实现人脸识别
2021/01/04 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
女娲补天教学反思
2014/02/05 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
统计员岗位职责
2015/02/11 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技