vue2.x + ts 项目语法规范

情非得已小猿猿

已于 2022-08-09 10:08:06 修改

阅读量1.6k

点赞数 2

分类专栏： Vue TypeScript 前端开发文章标签： vue typescript

于 2021-01-19 15:04:06 首次发布

本文链接：https://blog.csdn.net/weixin_43924228/article/details/112833600

版权

前端开发同时被 3 个专栏收录

75 篇文章 1 订阅

订阅专栏

Vue

31 篇文章 2 订阅

订阅专栏

TypeScript

16 篇文章 1 订阅

订阅专栏

1、声明函数

private、public、protected

private formStatus: string = 'create'
private form: formDTO = {
    account: '',
    password: ''
}

2、@ 装饰器（替换钩子函数）

从vue-property-decorator引入相应的装饰器（Component, Prop, Watch...）
!: 表示强制解析, 告诉ts编辑器一定有值
@Component 必须得有
相关装饰器的用法

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import vHead from './header.vue';

interface formDTO {
    account: string,
    password: string
}

@Component({
    components: {
        vHead,
    },
})

export default class Test extends Vue {
    @Prop({
        type: Object,
        required: false,
        default: {}
    }) formData !: object

    @Watch('formData', { immediate: true, deep: true })
    private onFormDatachanged(val: any){
        // console.log(val)
        this.currentId = val.id;
        this.formStatus = val.dialogStatus;
    }
    
    private formStatus: string = 'create'
    private form: formDTO = {
  		account: '',
    	password: ''
	}
};
</script>