1 <template>

 2   <div>

 3     <input v-model="msg">

 4     <p>prop: {{ propMessage }}</p>

 5     <p>msg: {{ msg }}</p>

 6     <p>helloMsg: {{ helloMsg }}</p>

 7     <p>computed msg: {{ computedMsg }}</p>

 8     <Hello ref="helloComponent" />

 9     <World />

10     <button @click="greet">Greet</button>

11   </div>

12 </template>

13

14 <script lang="ts">

15 import Vue from 'vue'

16 import Component from '../lib/index'

17 import Hello from './Hello.vue'

18 import World from './World'

19 // We declare the props separately

20 // to make props types inferable.

21 const AppProps = Vue.extend({

22   props: {

23     propMessage: String

24   }

25 })

26 @Component({

27   components: {

28     Hello,

29     World

30   }

31 })//这里就算没有component也要保留"@Component"，否则报错

32 export default class App extends AppProps {

33   // data数据改为属性的形式

34   msg: number = 123

35   // use prop values for initial data

36   helloMsg: string = 'Hello, ' + this.propMessage

37   // lifecycle hook

38   mounted () {

39     this.greet()

40   }

41   // computed:计算属性改为前面加get关键字

42   get computedMsg () {

43     return 'computed ' + this.msg

44   }

45   // method：方法就不用再写在methods里了，直接以类方法形式书写

46   greet () {

47     alert('greeting: ' + this.msg)

48     this.$refs.helloComponent.sayHello()

49   }

50   // dynamic component

51   $refs!: {

52     helloComponent: Hello

53   }

54 }

55 </script>