如何在Vue項目中應用TypeScript類
一、前言
TypeScript是基于vue-class-component庫而來，這個庫vue官方推出的一個支持使用class方式來開發(fā)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中的監(jiān)聽器，如下：
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中的事件的觸發(fā)$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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家分享一篇解決iview打包時UglifyJs報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue生命周期與鉤子函數,結合簡單實例形式分析了vue.js生命周期及鉤子函數相關流程與實現技巧,需要的朋友可以參考下2019-03-03
一文了解Vue 3 的 generate 是這樣生成 render&n
本文介紹generate階段是如何根據javascript AST抽象語法樹生成render函數字符串的,本文中使用的vue版本為3.4.19,感興趣的朋友跟隨小編一起看看吧2024-06-06
vant中的Cascader級聯選擇異步加載地區(qū)數據方式
這篇文章主要介紹了vant中的Cascader級聯選擇異步加載地區(qū)數據方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
詳解Vue.js基于$.ajax獲取數據并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數據并與組件的data綁定，非常具有實用價值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue中Promise的使用方法詳情，Promise可以說是異步編程的一種解決方法,主要是為了解決代碼亂的情景而出現的,下文介紹其具體用法，需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了淺談vuex actions和mutation的異曲同工 ，詳細的介紹了actions和mutation的使用和區(qū)別，非常具有實用價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要為大家學習介紹了基于Vue如何實現視頻播放的功能，文中的示例代碼講解詳細，具有一定的參考價值，需要的小伙伴可以了解一下2023-08-08
Vue iview-admin框架二級菜單改為三級菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級菜單改為三級菜單的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue2.x版本中computed和watch的使用及關聯和區(qū)別
這篇文章主要介紹了vue2.x版本中computed和watch的使用及關聯和區(qū)別，文章圍繞主題展開詳細的內容介紹，需要的小伙伴可以參考一下2022-07-07