1
2
3
4
5
6
7
8
9
// 导入部分
import Component, { mixins } from 'vue-class-component'
// 如果用到了vue-property-decorator库，建议只使用一个库导入，避免Component在项目中频繁从两个不同的库中读取
import { Component, Prop, Vue } from 'vue-property-decorator'

// 使用部分，@Component必写
@Component
export default class HelloWorld extends Vue {}

1
2
3
4
5
6
7
import Vue from 'vue'
import Component from 'vue-class-component'

// Hello 类将是vue的组建
@Component
export default class Hello extends Vue {}

1
2
3
4
5
6
@Component
export default class Hello extends Vue {
  // data可以直接声明为类属性
  message = 'Hello World!'
}

1
2
3
4
5
6
7
8
@Component
export default class Hello extends Vue {
  // methods可以直接声明为类方法
  hello() {
    console.log('Hello World!')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component
export default class Hello extends Vue {
  name = 'John'
  
  // computed声明为类属性getter / setter
  get name() {
    return this.name
  }
  set name(value) {
    this.name= value
  }
}

1
2
3
4
5
6
7
8
9
@Component
export default class HelloWorld extends Vue {
  // 所有Vue生命周期挂钩也可以直接声明为类原型方法，但是您不能在实例本身上调用它们。
  // 声明自定义方法时，应避免使用这些保留名称。
  mounted() {
    console.log('mounted')
  }
}

1
2
3
4
5
6
7
import Component from 'vue-class-component'
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
  data () {
    return {
      msg: 'msg'
    }
  },
  methods: {
    hello () {}
  },
  mounted() {}, 
  computed: {
    newmsg () {
      return 'new ' + this.msg
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
// mixins.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export class Hello extends Vue {
  hello = 'Hello'
}
@Component
export class World extends Vue {
  world = 'World'
}

1
2
3
4
5
6
7
8
9
10
import Component, { mixins } from 'vue-class-component'
import { Hello, World } from './mixins'

@Component
export class HelloWorld extends mixins(Hello, World) {
  created () {
    console.log(this.hello + ' ' + this.world + '!')
  }
}

1
2
3
4
5
6
7
8
export default {
  components: {},
  props: {},
  watch: {
    msg (newVal, oldVal) {}
  }
}

1
2
3
4
5
6
7
8
9
10
// 对于所有其他选项，将它们传递给装饰器函数
@Component({
  components: {},
  props: {},
  watch: {
    new (newVal, oldVal) {}
  }
})
export default class HelloWorld extends Vue {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})

@Component
export default class Greeting extends GreetingProps {
  get message(): string {
    // this.name will be typed
    return 'Hello, ' + this.name
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import Component, { mixins } from 'vue-class-component'
import Super from './super'

const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})

@Component
export default class Greeting extends mixins(GreetingProps, Super) {
  get message(): string {
    return 'Hello, ' + this.name
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <input ref="input">
</template>

@Component
export default class InputFocus extends Vue {
  // `!` (显式赋值断言，就是由用户自己保证，这个属性在使用前会初始化，类型检查不管这个属性了)
  // 这样就可以消除编译错误
  $refs!: {
    input: HTMLInputElement
  }

  mounted() {
    this.$refs.input.focus()
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue'
import Component from 'vue-class-component'
import { mapGetters, mapActions } from 'vuex'
import { Post } from './post'

@Component({
  computed: mapGetters([
    'posts'
  ]),
  methods: mapActions([
    'fetchPosts'
  ])
})
export default class Posts extends Vue {
  posts!: Post[]
  fetchPosts!: () => Promise<void>

  mounted() {
    this.fetchPosts().then(() => {
      console.log(this.posts)
    })
  }
}