vue+ts

vue+ts

新建一个基于ts的vue项目

vue create ts-vue-project

项目结构

vue+ts使用

基础

<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default class Home extends Vue {
  // data值
  public visible = false;
  public userData = {
     userName: '张三',
     age: '5'
   }
   
  // 生命周期钩子
  public async mounted () {
    this.getList()
  }
   
   // 计算属性 computed
   get computedTitle (): string {
     return  'computed'+ this.title 
   }
   
   // 方法 methods
   public change () {
     this.visible = !this.visible
   }
}
</script>

@Component

import { Component } from 'vue-property-decorator'
import componentA from '@/components/componentA/Index.vue'
import componentB from './componentB/Index.vue'
@Component({
  components: {
    componentA,
    componentB
  }
})

@prop

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class MyForm extends Vue {
  @Prop({
    type: String,
    default: ''
  })
  title!: string         // 对title属性进行非空断言

  @Prop({
    type: Object,
    default () {
      return {}
    }
  })
  rules?: object       // 可选属性

@watch

import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class Content extends Vue {
  public msg:string = "";
   @Watch("msg");
   changeVal(newVal:string, oldVal:string){
         ...
    }
}

mixin

import Component, { mixins } from 'vue-class-component';
import MyMixin from './mixin.js'

@Component
export class MyComp extends mixins(MyMixin) {
    created () {
      console.log(this.mixinValue) // -> Hello
    }
}