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) } }