vue-class-component

人的教养不能够靠别人传授，人必须进行自我修养。一切苦修也绝不是文化修养，教育是通过人的主动性来实现的，教育牢牢地钉在主动性上。——费希特

官方文档：https://class-component.vuejs.org/

class-component是vue官方库之一，其可以让你使用class的方式定义、编写组件

再加上ts的装饰器，最终效果如下：

<template>
  <div>
    <button v-on:click="decrement">-</button>
    {{ count }}
    <button v-on:click="increment">+</button>
  </div>
</template>

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

// Define the component in class-style
@Component
export default class Counter extends Vue {
  // Class properties will be component data
  count = 0

  // Methods will be component methods
  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}
</script>

同样，其可以配合tsx使用，这样就越来越像我们的react了

<script lang="tsx">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  count = 0;

  increment() {
    this.count++;
  }

  get twiceTheCounter() {
    return this.count * 2;
  }

  mounted() {
    console.log('mounted')
  }

  // Declare render function
  render() {
    return (
      <div>
        <div>{this.msg}</div>
        <p>You clicked {this.count} times</p>
        <p>{this.twiceTheCounter}</p>
        <button onClick={this.increment}>Click me</button>
      </div>)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>