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 while语句和do while语句的区别分析
Dec 08 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
几种响应式文字详解
May 19 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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删除非空目录的函数代码小结
2013/02/28 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
图解Python变量与赋值
2018/04/03 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python OS模块实例详解
2019/04/15 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python基础教程之while循环
2019/08/14 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
升学宴主持词
2014/04/02 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
食品安全演讲稿
2014/09/01 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js