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 select控制插件
Aug 17 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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 类自动载入的方法
2015/06/03 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python通过smpt发送邮件的方法
2015/04/30 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
如何给Python代码进行加密
2020/01/10 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
GWT的应用有哪两种部署模式
2012/12/21 面试题
自动一体化专业求职信
2014/03/15 职场文书
小学一年级学生评语
2014/04/22 职场文书
活动总结怎么写
2014/04/28 职场文书
公司贷款承诺书
2014/05/30 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
化工厂员工工作总结
2015/10/15 职场文书
2019年思想汇报
2019/06/20 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js