Vue 自定义方法

引言

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

JavaScript函数

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

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

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

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

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

Vue 方法定义

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

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

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

其完整调用示例如下：

<div id="demo">
	<button @click="clickone">one click</button>		
</div>
<button onclick="app.outer()">outer btn</button>

<script type="text/javascript">

	new Vue({
		el:"#demo",
		data:{
			num:1
		},
		methods:{
			clickone(event){
				console.log(event.target.tagName);

			}
		}
	})
</script>

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

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

其完整示例如下：

<div id="demo">
	<button @click="clickone">one click</button>		
</div>
<button onclick="app.outer()">outer btn</button>

<script type="text/javascript">

	new Vue({
		el:"#demo",
		data:{
			num:1
		},
		methods:{
			clickone：function(event){
				console.log(event.target.tagName);

			}
		}
	})
</script>

原文：https://blog.csdn.net/mystonelxj/article/details/87888689