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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
Javascript模块化编程详解
Dec 01 Javascript
javascript实现在线客服效果
Jul 15 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
javaScript基础详解
Jan 19 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Vue常用指令详解分析
Aug 19 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
canvas知识总结
2017/01/25 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python matlibplot绘制3D图形
2018/07/02 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python画图高斯分布的示例
2019/07/10 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2015年党小组工作总结
2015/05/26 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL