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 相关文章推荐
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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
浅析is_writable的php实现
2013/06/18 PHP
PHP解析RSS的方法
2015/03/05 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
js选择器全面解析
2016/06/27 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
详解webpack 入门与解析
2018/04/09 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
Python之Web框架Django项目搭建全过程
2017/05/02 Python
详解Python中的四种队列
2018/05/21 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Python基于execjs运行js过程解析
2020/11/27 Python
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
一套.net面试题及答案
2016/11/02 面试题
火锅店创业计划书范文
2014/02/02 职场文书
警察群众路线整改措施
2014/09/26 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Python函数式编程中itertools模块详解
2021/09/15 Python
JS函数式编程实现XDM一
2022/06/16 Javascript