Vue 自定义方法的两种形式

 

引言

作为一个一个构建用户界面的框架，Vue 在定义其内置方法时有其特有的书写方式，这与典型的JavaScript书写方法有相通之处，但有其特点

JavaScript函数

典型的JavaScript定义函数方法有两种形式，一种为声明式定义，如下所示：

function functionName(value1...){
    //函数体
}

还有一种形式，为表达式定义，如下所示：

var functionName = function(value1...){
    //函数体
}

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

Method方法

Vue是基于ES6所开发的框架，其方法定义形式也是与JavaScript相关的，与JavaScript函数定义相似，在Vue对象的Methods定义也有两种形式:

一种类似声明式定义，如下所示：

methods:{
	functionname(value1...){
     }
}

其完整调用示例如下：

	

		one click		
	
	outer btn

	

另一种类似表达式定义，如下所示

methods:{
	functionname：function(value1...){
     }
}

其完整示例如下：

	

		one click		
	
	outer btn