Vue中自定义方法的形式

jadetii

已于 2023-02-13 20:43:52 修改

阅读量339

点赞数

分类专栏：前端杂记文章标签： javascript 前端前端框架

于 2023-02-13 20:38:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53832794/article/details/129016299

版权

前端杂记专栏收录该内容

19 篇文章

订阅专栏

文章介绍了JavaScript中函数的声明式和表达式定义，以及这两种方式在浏览器解析上的差异。同时，它探讨了Vue框架中methods属性定义函数的形式，并展示了在模板中如何调用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js函数

申明式定义：

function functionName(value...){
    //函数体
}
//调用时functionName(value...)

表达式定义：和定义变量不同，定义变量里面存的是变量，这个里面存的是函数

var functionName = function(value...){
    //函数体
}
//调用方法相同

两者不同之处在于浏览器解析器对其的解析不同，声明式定义会先被解析再执行，而表达式定义则是不会先做解析，而是在执行到该语句时再做解析。

Method方法

Vue是基于ES6所开发的框架，其方法定义形式与js函数定义相似，在Vue对象中的methods定义也有两种形式。

类似声明式定义：

methods:{
    functionname(value...){
        //函数体
     }
//调用时可以1、绑定事件例如<button @click="functionname">one click</button> 
    //也可以2、使用插值语法直接将方法返回值插入例如<span>{{functionname()}}</span>
}

类似表达式定义：

methods:{
    functionname：function(value...){
        //函数体
     }
//调用方法相同
}