在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。

1、安装npm i -S vue-property-decorator

2、@Component

即使没有组件也不能省略@Component,否则会报错。

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components'; @Component({
components:{
componentA,
componentB,
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
})
export default class YourCompoent extends Vue{ }

3、@Prop 父子组件之间值的传递

@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

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

@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
  @Prop([String,Number]) propB:string|number;
  @Prop({
    type: String,// type: [String , Number]
    default: 'default value', // 一般为String或Number
    //如果是对象或数组的话。默认值从一个工厂函数中返回
    // defatult: () => {
      // return ['a','b']
    // }
    required: true,
     validator: (value) => { return [ 'InProcess', 'Settled' ].indexOf(value) !== -1 } }) propC:string;
}

注意title参数中的感叹号。如果需要设置为true或者有默认道具,我只使用它。如果没有,那么你应该使用| undefined。

“明确的赋值断言是一个特性,允许在实例属性和变量声明之后放置!以向TypeScript传递一个变量确实被分配用于所有意图和目的,即使TypeScript的分析无法检测到它。”

@Componentexport default class MyComponent extends Vue {
@Prop({ required: true }) title!: string
@Prop() optionalItem: string|undefined
}

4、@Emit

@Emit(event?: string) decorator

import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
count = 0 @Emit()
addToCount(n: number) {
this.count += n
} @Emit('reset')
resetCount() {
this.count = 0
} @Emit()
returnValue() {
return 10
} @Emit()
onInputChange(e) {
return e.target.value
} @Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}

5、@Watch

@Watch(path: string, options: WatchOptions = {}) decorator

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

@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {} @Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {} @Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}

其它详见文档

vue-property-decorator使用指南的更多相关文章

  1. vue入门|ElementUI使用指南

    vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框 ...

  2. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  3. Vue精简版风格指南

    前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版 组件名称 [组件 ...

  4. Vue.js命名风格指南

    前言 本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码.这使得代码具有如下的特性: 统一团队的命名规范,其它开发者或是团队成员更容易上手阅读和理解. IDEs 更容易理解代码,从而提供 ...

  5. Vue的理解:Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  6. cordova + Vue 开发 APP 上手指南

    什么是 cordova cordova 是由 Apache 基金会支持的,使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架.其支持调用手机系统(Android.IOS.W ...

  7. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  8. Vue 3.0 升级指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 2020年9月18日Vue 3.0正式发布,距离2016年10月1日Vue ...

  9. 使用 Vue + TypeScript 时项目中常用的装饰器

    目录 一.@Component 装饰器 1)父组件 2)子组件 二. @Emit 装饰器 1)父组件 2)子组件 三. @Model 装饰器 1)父组件 2)子组件 四. @Prop 装饰器 1)父组 ...

  10. Vue.js的库,包,资源的列表大全。

    官方资源 外部资源 社区 播客 官方示例 入门 开发工具 语法高亮 代码片段 自动补全 组件集合 库和插件 路由 ajax/数据 状态管理 校验 UI组件 i18n 示例 模板 脚手架 整合 插件/指 ...

随机推荐

  1. mysql复制表结构和表数据

    我们知道,在SQL Server中,如果要复制表结构和表数据的话,可以使用select into语句. select * into yanggb1 from yanggb; 但是在MySQL中是不支持 ...

  2. PyTorch-网络的创建,预训练模型的加载

    本文是PyTorch使用过程中的的一些总结,有以下内容: 构建网络模型的方法 网络层的遍历 各层参数的遍历 模型的保存与加载 从预训练模型为网络参数赋值 主要涉及到以下函数的使用 add_module ...

  3. jQuery实现电梯导航特效

    功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...

  4. 暴力破解( Hydra | Medusa)

    暴力破解 By : Mirror王宇阳 笔者告知 : 暴力破解的结果是运气和速度的结晶,开始暴力破解前烧一炷香也是必要的! 引用张炳帅的一句话:"你的运气和管理员的安全意识成正比" ...

  5. 使用kubernetes的cronjob定时备份mysql数据库

    1.创建cronjob的文件 CronJob所描述的,正是定时任务. 在给定时间点只运行一次 在给定时间点周期性地运行 一个 CronJob 对象类似于 crontab (cron table)文件中 ...

  6. 一起学SpringMVC之Request方式

    本文主要以一些简单的小例子,简述在SpringMVC开发过程中,经常用到的Request方面的内容,仅供学习分享使用,如有不足之处,还请指正. 概述 在客户机和服务器之间进行请求-响应时,两种最常被用 ...

  7. python3读取图像并可视化的方法(PIL/Pillow、opencv/cv2)

    原图: 使用TensorFlow做图像处理的时候,会对图像进行一些可视化的操作.下面,就来列举一些我知道的图像读取并可视化的方法. 1. Pillow模块 1.1 Pillow模块的前生 Pillow ...

  8. 【转载】C#string.Formart的字符串格式化

    String.Format 方法的几种定义: String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项.Stri ...

  9. [Go] golang中的包管理

    在配置了环境变量$GOPATH后,比如下面这个路径 export GOPATH=/mnt/f/ubuntu/goProject 在这个路径下面会有这几个目录 在src目录下放着我的源码比如: 在同一个 ...

  10. 解决Android Screen Monitor在android8.0及以上系统报错:"E/Screenshot: Unsupported protocol: 2"

    1.打开命令窗口,切换到 asm.jar 所在目录,执行 java -jar asm.jar,正常情况下打开后连接上设备会显示出画面 2.但是在android8.0以上系统该asm.jar包就无法正常 ...