vue中使用typescript包括data、mixins、watch、props、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>