vue 函数调用加括号与不加括号的区别

写在前面：最近做的一个项目用是很久之前的，在维护项目中就无法使用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中的方法调用时和再用原生遇到的疑惑的点在于在行内加方法，

  <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 函数调用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 对vue里函数的调用顺序介绍

    method用来定义方法的,比如你@click="test",methods就定义test这个方法 created和ready都是 vue 组件的生命周期 created 类型: Function 详细: 在实例创建之后同步调用.此时实例已经结束解析选项,这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调.但是还没有开始 DOM 编译,$el 还不存在. ready 类型: Function 详细: 在编译结束和 el第一次插入文档之后调用,如在第一次attached钩

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • 在vue中使用回调函数,this调用无效的解决

    let self = this //使用新变量替换this,以免this无效 //updateStudentInfoToServer是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据,第二.三个是函数,第二.三个函数使用function(){}形式书写 updateStudentInfoToServer:function(data, networkOk, networkError){ let postData = this.$qs.stringify({ data:data })

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • vue 调用 RESTful风格接口操作

    首先是简单的java接口代码 写了四个让前端请求的接口,以下为代码 @GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200,username

  • 三步搞定:Vue.js调用Android原生操作

    第一步: Android对Js的接口,新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support.annotation.RequiresApi; import android.util.Log; import android.webkit.

  • vue 实现一个简单的全局调用弹窗案例

    1.实现效果图 2.第一步,新建一个.vue文件 定义一个弹框的基本模板 style样式放在了文章的最底部,如果需要看效果,需要将样式放入这个vue文件里,样式是用less写的,需要你的项目引入less 注意:我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径 <template> <div id="tip_alertModal"> <div class="t-alert-mask"></div> <di

  • vue调用本地摄像头实现拍照功能

    前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用.实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <template> <div class="camera_outer"> <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay

  • vue 函数调用加括号与不加括号的区别

    写在前面:最近做的一个项目用是很久之前的,在维护项目中就无法使用vue等技术来操作,所以一些方法用的是原生来写的,在绑定点击方法时,方法名没加括号,就没生效,加了括号就生效了,当时有疑惑的点是在之前做vue的项目中,我记得不加括号也是完全可以的,于是就详细的查了一下. 原生方法调用函数 在script里写方法,不加括号的话就相当于得到的是这个函数体,是这个函数本身,并不会执行函数 <body> <div>函数调用是否要加括号</div> <button>点击

  • 详谈构造函数加括号与不加括号的区别

    如下所示: //首先定义一个构造函数Hello function Hello(){ alert(1): } //定义一个函数表达式 var getName = function(){ alert(2): } //实例化对象,下面这两个如果构造函数没有形参的话,实例化的时候构造函数可以不加括号(推荐加上): var p = new Hello: var p1 = new Hello(): //但是用下边的方式调用getName函数的时候,构造函数有没有括号可就不一样了: new Hello.get

  • 解析python调用函数加括号和不加括号的区别

    下面看下python调用函数加括号和不加括号的区别,具体代码如下所示: def bracket(data): return data if __name__ == '__main__': # 不带括号调用的结果:<function bracket at 0x0000000004DD0B38>,a是整个函数体,是一个函数对象,不须等该函数执行完成 a = bracket print a # 带括号调用的结果:6 ,b是函数执行后返回的值6,须等该函数执行完成的结果 b = bracket(6)

  • C语言中if语句加大括号和不加大括号的区别介绍

    首先来回顾以下if语句 if(表达式1){     语句1     语句2     --   } 如果表示条件的逻辑表达式的结果不是0,那么就执行后面跟着的这对大括号内的语句: 否则就跳过不执行 继续下面的其他语句. 但是if语句还有一种形式可以不用{}. 举个栗子: if(a > b) a += b + 10; if语句这一行结束的时候并没有表示语句结束的";",而后面的赋值语句写在if的下一行,而且缩进了,在这一行结束的时候有一个分号. 表明这条赋值语句是if语句的一部分,i

  • Python中装饰器兼容加括号和不加括号的写法详解

    使用Django的时候,我发现一个很神奇的装饰器: @login_required, 这是控制一个view的权限的,比如一个视图必须登录才可以访问,可以这样用: @login_required def my_view(request): ... return render(...) 同时,如果要达到这样一种效果:如果用户没有登录,那么就把用户重定向到登录界面,可以这样用: @login_required(login_url='/accounts/login/') def my_view(requ

  • javascript中加var和不加var的区别 你真的懂吗

    Javascript是遵循ECMAScript标准下的一个产物,自然ECMAScript的标准其要遵循. 先来看下var关键字的定义和用法 var 语句用于声明变量. JavaScript 变量的创建也叫作"声明"一变量: 复制代码 代码如下: var carName; 变量声明后,变量为空 (没有值). 为变量复制,操作如下: 复制代码 代码如下: carName = "Volvo"; 声明变量时,你同样可以为变量赋值: 复制代码 代码如下: var carNam

  • javascript定义变量时加var与不加var的区别

    一.外部的为全局,内部的为局部变量. 二.加var为局部变量(在方法内),不加var为全局变量(当方法内有一次使用后) 复制代码 代码如下: <script type="text/javascript"> var golbe="global"; test(); function test(){      var local="local";     document.write(golbe);     document.write(l

  • php数组索引的Key加引号和不加引号的区别

    今天在看一个PHP博客时留意了这么一句话:"PHP中的索引KEY值如果不用引号括起来的话,会将索引KEY值解释为一个常量,当找不到该常量的定义时,才将其解释为一个字符串".我有点不太相信,因为我一直都会将索引KEY用引号括起来,从而没有出现这种情况.趁现在有时间正好写行代码测试一下: 复制代码 代码如下: define('WEBHOST','blog'); $wso = array(); $wso['blog'] = 'www.weixiaodeyu.com'; $wso['WEBHO

  • 浅谈js中调用函数时加不加括号的问题

    其实总结起来如下: 函数只要是要调用它进行执行的,都必须加括号.此时,函数()实际上等于函数的返回值.当然,有些没有返回值,但已经执行了函数体内的行为,这个是根本,就是说,只要加括号的,就代表将会执行函数体代码. 不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码.它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行. 所以一般时候我们都是采用的是无括号的原因.这也是由于括号的二义性,因为括号是"函数调用运算符",相当于在执行

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

随机推荐