vue与TypeScript集成配置最简教程(推荐)(2)

安装开发依赖

# npm install --save-dev vue-class-component

修改ts配置文件,增加以下两项配置

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

改写我们的Hello组件

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }
</script>

使用vue-class-component后,初始数据可以直接声明为实例的属性,而不需放入data() {return{}}中,组件方法也可以直接声明为实例的方法,如官方实例,更多使用方法可以参考其官方文档

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
 // 所有的组件选项都可以放在这里
 template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
 // 初始数据可以直接声明为实例的属性
 message: string = 'Hello!'
 // 组件方法也可以直接声明为实例的方法
 onClick (): void {
  window.alert(this.message)
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6106.html