在 vue 3 中，方法可用于执行特定功能，有两种语法：方法选项语法和模板方法语法。方法修饰符可自定义方法行为，如 .prevent、.once 等。此外，可以通过 this 访问组件实例的属性、数据和方法。使用方法时，可以通过 v-on 指令或直接调用进行。
Vue 3 中如何编写方法
引言
Vue 3 中的方法是组件或实例的一部分，用于执行特定功能。它们可以用来更新状态、处理数据或与外部服务交互。
语法
立即学习“前端免费学习笔记（深入）”；
Vue 3 中的方法有两种语法：
- 方法选项语法：
<code class="js">export default {
methods: {
greet() {
console.log('Hello, world!');
}
}
}</code>- 模板方法语法：
<code class="html"><template>
<button @click="greet">Greet</button>
</template>
<script>
export default {
methods: {
greet() {
console.log('Hello, world!');
}
}
}
</script></code>方法修饰符
Vue 3 提供了几个方法修饰符，用于自定义方法的行为：
- .native：阻止 Vue 拦截事件监听器。
- .prevent：防止链接导航。
- .self：仅在事件目标是组件自身时调用方法。
- .once：仅调用方法一次。
访问组件实例
在方法中，可以通过 this 来访问组件实例。这使您可以访问组件的属性、数据和方法。
使用方法
可以通过以下方式使用方法：
-
在模板中：使用
v-on指令将事件绑定到方法。 - 在脚本中：直接调用方法。
范例
让我们编写一个方法，当单击按钮时输出一条消息：
<code class="html"><template>
<button @click="greet">Greet</button>
</template>
<script>
export default {
methods: {
greet() {
console.log('Hello, world!');
}
}
}
</script></code> 
