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中大括号“{}”的多义性
Dec 02 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php如何获取文件的扩展名
2015/10/28 PHP
Javascript开发包大全整理
2006/12/22 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Python continue语句用法实例
2014/03/11 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python 生成器协程运算实例
2017/09/04 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
django 取消csrf限制的实例
2020/03/13 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
几个Shell Script面试题
2012/08/31 面试题
中学生校园广播稿
2014/01/16 职场文书
秋季运动会稿件
2014/01/30 职场文书
公司食堂管理制度
2015/08/05 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis