安装开发依赖
# 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) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。