Vue-methods

Jealous_-

已于 2024-05-15 06:17:35 修改

阅读量357

点赞数 5

分类专栏： Vue 文章标签： vue.js

于 2024-05-14 21:50:53 首次发布

本文链接：https://blog.csdn.net/m0_73839298/article/details/138871299

版权

Vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

什么是methods？

在Vue.js中，methods是一个对象，它包含了一系列定义的方法（functions），这些方法可以被组件的模板、事件监听器、生命周期钩子、计算属性、甚至是其他方法调用。methods 中的方法通常用于执行以下操作：按钮点击、表单提交、封装组件所需的业务逻辑、修改 Vue 实例的响应式数据、发起 AJAX 请求、组件之间传递数据或调用其他组件的方法，总体来说用于执行响应用户交互、执行业务逻辑、触发数据更新、执行异步操作、组件通信。

非常重要！

methods 中的方法可以访问 Vue 实例的data、props、和其他 methods，因为它们拥有对 Vue 实例的引用（通过 this 关键字）。

注意事项！

methods在 Vue 组件中，methods 是一个包含方法定义的对象，在模板中通过 v-on 或简写 @ 来监听 DOM 事件，并调用 methods 中的方法，methods 中的方法可以更改组件的响应式数据，这将导致视图的更新，methods 中的方法通常不包含状态，状态应该放在 data 或 computed中，应避免在 methods 中使用箭头函数，因为它们会错误地绑定 this 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
</head>
<body>

    <div id="root">

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //关闭Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {

            },
            methods: {
                //方法
            },
        })
    </script>

</body>
</html>