vue-property-decorator用法(持续更新)

简介: 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)
   }
}


目录
相关文章
|
6月前
第14节:Vue3 简化用法<script setup>
第14节:Vue3 简化用法<script setup>
55 0
|
JavaScript 前端开发 索引
28Vue - 列表渲染(基本用法)
28Vue - 列表渲染(基本用法)
46 0
|
JavaScript
vue中 v-for循环的用法详解
vue中 v-for循环的用法详解
218 0
vue中 v-for循环的用法详解
|
6月前
|
JavaScript API UED
|
6月前
|
JavaScript
Vue中的v-bind指令的用法有哪些?
Vue中的v-bind指令的用法有哪些?
183 37
|
6月前
|
JavaScript 前端开发 API
Vue3 组合式 API 的特性、用法和最佳实践
Vue3 组合式 API 的特性、用法和最佳实践
279 1
|
6月前
|
移动开发 JavaScript 安全
技术博客:Vue中各种混淆用法汇总
技术博客:Vue中各种混淆用法汇总
110 0
|
6月前
Vue3的reactive、ref、toRef、toRefs用法以及区别
Vue3的reactive、ref、toRef、toRefs用法以及区别
106 0
|
6月前
|
缓存 JavaScript 前端开发
技术博客:Vue中各种混淆用法汇总
技术博客:Vue中各种混淆用法汇总
75 0
|
6月前
|
缓存 JavaScript API
最新,Vue 改进了响应式 API 中 getter 的用法!
最新,Vue 改进了响应式 API 中 getter 的用法!