基於typescript編寫vue的ts文件語法模板

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{ propMessage }}</p>
    <p>msg: {{ msg }}</p>
    <p>helloMsg: {{ helloMsg }}</p>
    <p>computed msg: {{ computedMsg }}</p>
    <Hello ref="helloComponent" />
    <World />
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from '../lib/index'
import Hello from './Hello.vue'
import World from './World'
// We declare the props separately
// to make props types inferable.
const AppProps = Vue.extend({
  props: {
    propMessage: String
  }
})
@Component({
  components: {
    Hello,
    World
  }
})//這里就算沒有component也要保留"@Component"，否則報錯
export default class App extends AppProps {
  // data數據改為屬性的形式
  msg: number = 123
  // use prop values for initial data
  helloMsg: string = 'Hello, ' + this.propMessage
  // lifecycle hook
  mounted () {
    this.greet()
  }
  // computed:計算屬性改為前面加get關鍵字
  get computedMsg () {
    return 'computed ' + this.msg
  }
  // method：方法就不用再寫在methods里了，直接以類方法形式書寫
  greet () {
    alert('greeting: ' + this.msg)
    this.$refs.helloComponent.sayHello()
  }
  // dynamic component
  $refs!: {
    helloComponent: Hello
  }
}
</script>

更多相關代碼示例看這里：https://github.com/vuejs/vue-class-component/tree/master/example