广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何在Vue项目中应用TypeScript类
  • 310
分享到

如何在Vue项目中应用TypeScript类

2024-04-02 19:04:59 310人浏览 独家记忆
摘要

目录一、前言二、使用1.@Component2.compued、data、methods3.@props4.@watch5.@emit三 、总结 一、前言 typescript是基于

一、前言

typescript是基于Vue-class-component库而来,这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库

主要的功能如下:

  • methods 可以直接声明为类的成员方法
  • 计算属性可以被声明为类的属性访问器
  • 初始化的 data 可以被声明为类属性
  • datarender 以及所有的 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组件,因此即使没有设置选项也不能省略

如果需要定义比如 namecomponentsfiltersdirectives以及自定义属性,就可以在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

这里取消了组件的datamethods属性,以往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与装饰器,但实际上本质是一致的,只有不断编写才会得心应手

到此这篇关于如何在Vue项目中应用TypeScript的文章就介绍到这了,更多相关在Vue项目中应用TypeScript内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何在Vue项目中应用TypeScript类

本文链接: https://www.lsjlt.com/news/135783.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何在Vue项目中应用TypeScript类
    目录一、前言二、使用1.@Component2.compued、data、methods3.@props4.@watch5.@emit三 、总结 一、前言 TypeScript是基于...
    99+
    2022-11-12
  • vue项目中如何使用typescript
    本篇内容主要讲解“vue项目中如何使用typescript”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中如何使用typescript”吧!1、引入Typescriptnpm ...
    99+
    2023-06-21
  • 如何在Vue3.0 项目中使用TypeScript 和 Vite
    如何在Vue3.0 项目中使用TypeScript 和 Vite?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件...
    99+
    2023-06-06
  • React项目中应用TypeScript的实现
    目录一、前言 二、使用方式 无状态组件 有状态组件 受控组件 三、总结 一、前言 单独的使用typescript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架...
    99+
    2022-11-12
  • vue-cli3+typescript如何新建一个项目
    这篇文章主要介绍了vue-cli3+typescript如何新建一个项目,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。初始化项目卸载老版本脚...
    99+
    2022-10-19
  • 在React项目中使用TypeScript详情
    目录项目目录及ts文件划分在项目中使用TypeScript具体实践组件声明React Hooks使用useStateuseRefuseCallbackuseMemouseContex...
    99+
    2022-11-13
  • vue项目中使用ts(typescript)入门教程
    目录1、引入Typescript2、配置文件webpack配置3、让项目识别.ts4、vue组件的编写data()中定义数据props传值完整代码案例最近项目需要将原vue项目结合t...
    99+
    2022-11-12
  • Mock.js在Vue项目中如何使用
    本篇内容主要讲解“Mock.js在Vue项目中如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Mock.js在Vue项目中如何使用”吧!Mock.js 初体验安装:npm ins...
    99+
    2023-07-02
  • 如何在Vue项目中使用vuex
    目录在Vue项目中使用vuex一、安装vuex二、创建store三、挂载store四、在组件中使用五、在Vue组件中监听Vuex总结在Vue项目中使用vuex 在一个vue项目中使用...
    99+
    2023-01-28
    Vue使用vuex Vue vuex Vue项目中使用vuex
  • Vue项目之ES6装饰器在项目实战中的应用
    目录前言装饰模式(Decorator)ES6 装饰器装饰器应用ValidateCatchErrorConfirmation总结参考前言 在面向对象(OOP)的设计模式中,装饰器的应用...
    99+
    2022-11-13
  • TypeScript在React项目中的使用实践总结
    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念。关于TS的类型查看可以使用在线TS工具👉TypeScri...
    99+
    2022-11-12
  • Console类如何在java项目中使用
    Console类如何在java项目中使用?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。java的Console类的使用方法JDK 6中提供了java.io.Console类...
    99+
    2023-05-31
    java console ava
  • NumberFormat 类如何在Java项目中使用
    本篇文章为大家展示了NumberFormat 类如何在Java项目中使用 ,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。概要:NumberFormat 表示数字的格式化类, 即:可以按照本地的风格习...
    99+
    2023-05-31
    java numberformat fo
  • AtomicInteger类如何在Java项目中使用
    这篇文章给大家介绍AtomicInteger类如何在Java项目中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首先看两段代码,一段是Integer的,一段是AtomicInteger的,为以下:public cl...
    99+
    2023-05-31
    java atomicinteger ava
  • IntBuffer类如何在Java项目中使用
    本篇文章给大家分享的是有关IntBuffer类如何在Java项目中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。具体方法如下:package com.ietree.basi...
    99+
    2023-05-31
    intbuffer java buf
  • File类如何在Java项目中使用
    今天就跟大家聊聊有关 File类如何在Java项目中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Java File类的详解及简单实例1. File():构造函数,一般...
    99+
    2023-05-31
    java file ava
  • Object类如何在Java项目中使用
    这篇文章将为大家详细讲解有关Object类如何在Java项目中使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Object是所有类的父类,任何类都默认继承Object。一、Object类中...
    99+
    2023-05-31
    java object ava
  • 在React、Vue项目中如何使用SVG
    这篇文章将为大家详细讲解有关在React、Vue项目中如何使用SVG,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在一些现代的扁平化设计网站,特别是移动端网站,经常会包含...
    99+
    2022-10-19
  • 如何在vue项目中使用UEditor--plus
    目录1:UEditor-plus富文本编辑器如何在vue项目中使用2.使用方法3.运行项目1:UEditor-plus富文本编辑器如何在vue项目中使用 备注:UEditor是由百度...
    99+
    2022-11-13
  • Mybatis-plus如何应用在项目中
    这篇文章主要为大家展示了“Mybatis-plus如何应用在项目中”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Mybatis-plus如何应用在项目中”这篇文章吧。Mybatis-plus是S...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作