如何在Vue项目中应用TypeScript类
作者:灰灰 发布时间:2023-07-02 16:51:36
目录
一、前言
二、使用
1.@Component
2.compued、data、methods
3.@props
4.@watch
5.@emit
三 、总结
一、前言
TypeScript
是基于vue-class-component
库而来,这个库vue官方推出的一个支持使用class
方式来开发vue
单文件组件的库
主要的功能如下:
methods
可以直接声明为类的成员方法计算属性可以被声明为类的属性访问器
初始化的
data
可以被声明为类属性data
、render
以及所有的 Vue 生命周期钩子可以直接作为类的成员方法所有其他属性,需要放在装饰器中
二、使用
vue-property-decorator 主要提供了以下装饰器
@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
@Component (由 vue-class-component 提供)
Mixins (由 vue-class-component 提供)
1.@Component
Component
装饰器它注明了此类为一个Vue组件,因此即使没有设置选项也不能省略
如果需要定义比如 name
、components
、filters
、directives
以及自定义属性,就可以在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{
}
2.compued、data、methods
这里取消了组件的data
和methods
属性,以往data返回对象中的属性、methods
中的方法需要直接定义在Class中,当做类的属性和方法
@Component
export default class HelloDecorator extends Vue {
count: number = 123 // 类属性相当于以前的 data
add(): number { // 类方法就是以前的方法
this.count + 1
}
// 获取计算属性
get total(): number {
return this.count + 1
}
// 设置计算属性
set total(param:number): void {
this.count = param
}
}
3.@props
组件接收属性的装饰器,如下使用:
import {Component,Vue,Prop} from vue-property-decorator;
@Component
export default class YourComponent extends Vue {
@Prop(String)
propA:string;
@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;
}
4.@watch
实际就是Vue中的 * ,如下:
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) {}
}
5.@emit
vue-property-decorator
提供的 @Emit
装饰器就是代替Vue中的事件的触发$emit
,如下:
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component({})
export default class Some extends Vue{
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
}
@Emit()
emitTodo(n: string){
console.log('hello');
}
}
三 、总结
可以看到上述typescript
版本的vue class
的语法与平时javascript
版本使用起来还是有很大的不同,多处用到class与装饰器,但实际上本质是一致的,只有不断编写才会得心应手
来源:https://www.tuicool.com/articles/m22ENbn
猜你喜欢
- python类class定义及其初始化定义类,功能,属性一般类名首字母大写class Calculator:#名字和价格是属性
- 我在网站上设置了邮件列表功能,实现用户自动订阅和发送,但很多用户输入和提交的邮件地址格式都是无效的,无法处理。请问如何解决这一问题?&nbs
- python多进程下实现日志记录按时间分割,供大家参考,具体内容如下原理:自定义日志handler继承TimedRotatingFileHa
- 本文实例讲述了python使用webbrowser浏览指定url的方法。分享给大家供大家参考。具体如下:这段代码提示用户输入关键词,通过we
- 方法: 使用urlencode函数urllib.request.urlopen()import urllib.requestimport u
- 变量覆盖漏洞<?php$flag='xxx'; extract($_GET); if(isset($shiyan))
- 不知不觉大半年没更新了...前面小二介绍过使用Typora+MinIO+Java代码打造舒适写作环境,然后有很多大佬啊,说用Java来实现简
- 由于本人使用的是windows 10 操作系统,所以介绍在 windows 10 系统中安装 Anaconda3 的过程。下载Anacond
- 阿里云服务器的带宽为2M,网站每日的备份包都3G多了,离线下载太费时间了,打算每日将备份包自动上传到自己的百度云盘里。 1、先安装
- 需求在画布上用鼠标画图,可以画圆或矩形,按m键在两种模式下切换。左键按下时开始画图,移动到哪儿画到哪儿,左键释放时结束画图。实现思想用鼠标画
- 简介表单的操作是Web程序开发中最核心的模块之一,绝大多数的动态交互功能都是通过表单的形式实现的。本文会教大家实现简单的表单操作。普通表单提
- 交换变量 x = 6y = 5x, y = y, xprint x>>> 5print y>>>
- 正好最近的域名备案通过了,兴起就突然想做一个网页,虽然之前去备案域名也是有这个目的。问过几个人,说用linux上用PHP搭建网站很简单,就试
- 预测结果转为numpy:logits=model(feature)#如果模型是跑在GPU上result=logits.data.cpu().
- 由于opencv读入图片数据类型是uint8类型,直接加减会导致数据溢出现象(1)用Numpy操作可以先将图片数据类型转换成int类型进行计
- 公司后端服务使用 java 重构后,很多接口采用了阿里的 dubbo 协议。而 python 是无法直接调用 dubbo 接口的,但可以通过
- base.html:{% extends "bootstrap/base.html" %}{% block styles
- 引言最近公司换了电脑,系统也从 win7 升级到 win11,开发环境都重新安装了一遍,然后在 idea 用mvn 执行打包命令 mvn c
- 参考链接亲测试以下版本成功激活附激活教程。idea下载链接(对应版本号下载):https://www.jetbrains.com/idea/
- 1.算法:(设查找的数组期间为array[low, high])(1)确定该期间的中间位置K(2)将查找的值T与array[k]比较。若相等