基于typescript编写vue的ts文件语法模板

Posted 2020-12-30 pjl43

 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>

更多相关代码示例看这里：https://github.com/vuejs/vue-class-component/tree/master/example