vue-ts

文档

1 导入组件@Component

<template>
  <div id="app">
      <Hello></Hello>
  </div>
</template>
<script lang="ts">
import {  Vue,Component} from 'vue-property-decorator';
import Hello from './components/Hello.vue'
@Component({
  components:{
    Hello
  }
})
export default class App extends Vue {
}
</script>

Tips:在export default最前面一定要加上@Component这个关键字。即使页面不引入其他组件。也必须加上。

2 data和生命周期

<template>
  <div id="app">
    {{ msg }}
  </div>
</template>
<script lang="ts">
import { Vue, Provide, Component } from "vue-property-decorator";
@Component({})
export default class App extends Vue {
  private msg:string = "hello world"
  mounted():void {
    console.log("http");
  }
}
</script>

3 计算属性 get

<template>
  <div id="app">
    <input type="number" v-model.number="price" />*
    <input type="number" v-model.number="count" />
    {{ sum }}
  </div>
</template>
<script lang="ts">
import { Vue, Component} from "vue-property-decorator";
@Component({})
export default class App extends Vue {
   private price:number = 3;
   private count:number = 10;
   get sum():number{
     return this.price*this.count
   }
}
</script>

4 get-set

<template>
  <div id="app">
    <input type="checkbox" v-model="myState">
  </div>
</template>
<script lang="ts">
import { Vue, Component} from "vue-property-decorator";
@Component({})
export default class App extends Vue {
   private  state:boolean = true;
   get myState(){
     return this.state
   }
   set myState(val){
     this.state = val
   }
}
</script>