# 前言

今天聊聊 Vue 實體中的 methods，中文叫做「方法」。

如同我們在說「物件的方法」一樣，Vue 世界如果說到「方法」，其實就是在講函式 (function)，而且 methods 的用途就跟 JavaScript 函式一樣，是拿來封裝邏輯。

如果方法有個回傳值，那它就可以寫在模版中。

除此之外，就像 JS 的 function 一樣，他也可以被拿來封裝「事件」要做的事情。

這篇文章會稍微用到 v-on 的指令，簡寫 @ ，雖然還沒寫到，不過語法就還蠻直覺的，應該很容易懂。
~~(其實之前的文章就有出現過，沒這東西實在有點難寫例子)~~

# method 撰寫位置

Vue 元件的方法，會寫在 setup() 函式裡頭：

	<div id="app">
	<button @click="plus()">{{ count }}</button>
	</div>

通常我們會使用到函式 (function)，往往是希望將某部分的商業邏輯進行整合，在需要的時候可以拿來重複使用。

記得上一篇提到，雙大括號裡面可以撰寫簡單的商業邏輯，但即便再簡單，只要寫多了就一定不好維護。

試想在模版中四處都寫了一樣的邏輯，被要求更改的時候就只能一個一個改，那有多麻煩。

在模板的大括號裡面，只要「能回傳一個值」的內容都可以寫進去。

我們可以將邏輯包覆在「方法」中，在方法內寫好回傳的資料，再把它丟到模版上使用：

	const { createApp, ref } = Vue;
	const app = createApp({
	setup() {
	const dataA = ref(123);
	const dataB = ref(456);
	const plus = () => dataA.value + dataB.value;
	return {
	plus,
	};
	},
	});
	app.mount("#app");

當然，這個方法也能帶入參數，讓功能更彈性：

	const { createApp, ref } = Vue;
	const app = createApp({
	setup() {
	const price1 = 123456;
	const price2 = 654321;
	const price3 = 556888;
	// 把邏輯封裝起來，在模版中重複使用
	const plus = (data) => data.toLocaleString();
	return {
	plus,
	price1,
	price2,
	price3
	};
	},
	});
	app.mount("#app");

實務上這樣寫其實還是不好維護，不過 v-for 指令 還沒講到，這裡先用「暴力法」示範方法的使用。

除了封裝邏輯，方法也會用在事件上。
所謂的事件，就是你我都熟悉的 document.addEventListener 會綁定的那些東西，最常見的事件大概就是點擊事件 click 了。

實際寫法其實在文章開頭就見過了：

	<div id="app">
	<button @click="plus()">{{ count }}</button>
	</div>

vue