The use of typescript in vue includes the usage of data, mixins, watch, props, and computed

home.vue

<template>
  <div class="home">
    {
    
    {
    
    name2}}
    <div :class="color">
      名字:{
    
    {
    
    name}}
      <button @click="changeName">改变颜色</button>
    </div>
    <input v-model="name" />

    <HelloWorld title="标题" content="内容" />
  </div>
</template>

<script lang="ts">
import {
    
     Component, Watch, Mixins, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";
import mix from "./mix";
@Component({
    
    
  components: {
    
     HelloWorld }
})
export default class Home extends Mixins(mix){
    
    
  color: string = "red";
  name: string = "武器大师";

  // 相当于computed
  get name2() {
    
    
    return this.name + 6666;
  }

  @Watch("name")
  private watchName(val: string) {
    
    
    console.log("名字发生了改变");
  }

  changeName(): void {
    
    
    if (this.color === "red") {
    
    
      this.color = "blue";
    } else {
    
    
      this.color = "red";
    }
  }
}
</script>
<style>
.red {
    
    
  color: red;
}
.blue {
    
    
  color: blue;
}
</style>

mix.ts

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

@Component
export default class mix extends Vue {
    
    
    public mounted() {
    
    
        console.log("mounted")
    }

}

HelloWorld.vue

<template>
  <div class="hello">
    <h3>{
    
    {
    
     title }}</h3>
    <p>{
    
    {
    
    content}}</p>
  </div>
</template>

<script lang="ts">
import {
    
     Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
    
    
  @Prop() private title!: string;
  @Prop() private content!: string;
}
</script>
<style>
.hello {
    
    
  width: 300px;
  height: 300px;
  background-color: pink;
  margin: 0 auto;
}
</style>