vue-property-decorator用法

vue-property-decorato用法

Detail.vue

组件内使用Component, Prop, Vue, Watch

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

注册组件

@component(
  components:{
  Banner,Slider 
  },
  name:"detail"
})

Prop、watch、created、readonly

 export default Class Detail extends Vue{
 //接收参数 src! 是ts lint ，不加！可能会报错
 @Prop:({type:String,default:""}) src!:String
 //定义常量
 readonly IMG_LIST = ["","",""]
 //定义变量，相当于在data中
 bannerSrc = this.IMG_LIST[0];
 //等同于computed计算属性，vue-ts版本中的computed属性使用了es6中的getter
  get id = {
   return 1
   }
 //watch监听src变化，src改变执行onSrcChange
   @watch('src',{immediate:true,deep:true})
   onSrcchange(newValue:String,oldValue:String){
   }
 //created
 @created(){
   }
 }

ts小记 声明泛型

export interface HomeRecommedList {
     text:String，
     img:String
}

export default Class services(){
//static 定义的属性不会走构造函数，即走constructor
 static init () {
    axios.default.baseURL = "http://www.baidu.com/"
   }
 static async getList () {
    this.init();
    //请求回来的res.data是HomeRecommedListItem[]类型（对象数组）
    return axios.get<HomeRecommedList[]>('/homeList').then(res=>res.data)
   }
}