Vue3基础03：自定义函数

最新推荐文章于 2025-04-13 22:51:24 发布

梦想当全栈

最新推荐文章于 2025-04-13 22:51:24 发布

阅读量1.7k

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_53590293/article/details/130157659

版权

Vue3 专栏收录该内容

3 篇文章

订阅专栏

自定义函数

根据业务来编写逻辑，把逻辑封装到自定义的结构中，把这个结构就叫做方法或函数

步骤

methods:表示表示声明自定义函数结构，在这个结构中定义多个方法
如何定义一个方法：方法的名称和方法的方法体组成
多个方法之间用逗号分割开，最后一个方法逗号省略
methods属性声明和data同级

{
	data(){
		return{}
	},
	methods：{
		方法名1（形参列表）{
		},
		方法名2（形参列表）{
		},
		...
	}
}

访问Vue中的结构：使用vue的实例对象来访问。

访问变量：vm.变量名
访问放大：vm.方法名(形参列表)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义函数</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            count: 1,
          };
        },
        methods: {
          //自定义函数
          increase() {
            //this表示Vue的当前实例对象
            this.count++;
          },
        },
      });

      const vm = app.mount("#app");
      //访问原来的变量值：vm.变量名
      console.log(vm.count); //1
      //访问方法：vm.方法名
      vm.increase(); //count++
      console.log(vm.count); //2
    </script>
  </body>
</html>