[Vue @Component] Simplify Vue Components with vue-class-component

Vue-Class-Component实战

最新推荐文章于 2025-05-30 11:51:20 发布

weixin_30716725

最新推荐文章于 2025-05-30 11:51:20 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/9343597.html

本文介绍如何使用vue-class-component简化Vue组件开发流程。通过在类中直接定义数据属性和方法，替代传统Vue组件的数据函数和方法对象。文章提供了一个简单的示例，展示了如何创建一个包含点击事件处理的组件。

While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-componentflattens component development by allowing you to add your data properties and handlers directly as properties of your class.

Install:

npm install vue-class-component --save

jsconfig.json:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

App.vue:

<template>
  <h1 @click="onClick">
    {{message}}
  </h1>
</template>

<script>
import Vue from "vue"
import Component from "vue-class-component"

@Component({})
export default class App extends Vue {
  message = "Hello from class"

  onClick() {
    this.message = "Goodbye"
  }
}
</script>

转载于:https://www.cnblogs.com/Answer1215/p/9343597.html