Vue プロジェクトで TypeScript クラスを適用する方法

Vue プロジェクトで TypeScript クラスを適用する方法

1. はじめに

TypeScriptは、vue によってリリースされた公式ライブラリであるvue-class-componentライブラリに基づいており、 classを使用してvue単一ファイル コンポーネントを開発することをサポートしています。

主な機能は次のとおりです。

  • methodsクラスのメンバーメソッドとして直接宣言できる
  • 計算プロパティはクラスのプロパティアクセサとして宣言できる
  • 初期化されたdataクラス属性として宣言できる
  • datarender 、およびすべてのVueライフサイクルフックは、クラスメンバーメソッドとして直接使用できます。
  • その他のプロパティはすべてデコレータに配置する必要があります

2. 使用

vue-property-decoratorは主に以下のデコレータを提供します

  • @プロップ
  • プロップシンク
  • @モデル
  • @時計
  • @提供する
  • @注入
  • @ProvideReactive
  • @InjectReactive
  • @エミット
  • @参照
  • @Component (vue-class-component によって提供)
  • ミックスイン(vue-class-component によって提供)

1. @コンポーネント

Componentデコレータ このクラスをVueコンポーネントとしてマークするため、オプションが設定されていない場合でも省略できません。

namecomponentsfiltersdirectives 、およびカスタム プロパティを定義する必要がある場合は、次のようにComponentデコレータで定義できます。

'vue-property-decorator' から {Component,Vue} をインポートします。 
'@/components' から {componentA,componentB} をインポートします。 
 
 @成分({ 
    コンポーネント:{ 
        コンポーネントA、 
        コンポーネントB、 
    }, 
    ディレクティブ: { 
        集中: 
            // 挿入された命令の定義: function (el) { 
                el.フォーカス() 
            } 
        } 
    } 
}) 
デフォルトのクラスをエクスポートし、YourCompoent を Vue に拡張します{ 
    
} 


2. 計算、データ、方法

ここでは、コンポーネントのdatamethodsの属性はキャンセルされます。従来、データ戻りオブジェクトの属性とmethodsのメソッドは、クラスの属性とメソッドとしてクラス内に直接定義する必要がありました。

@成分 
デフォルトのクラスHelloDecoratorをエクスポートし、Vueを拡張します。 
    count: number = 123 // クラス属性は前のデータと同等です 
 
    add(): number { // クラスメソッドは前のメソッドと同じ this.count + 1 
    } 
 
    // 計算属性を取得する get total(): number { 
      this.count + 1 を返す 
    } 
 
    // 計算プロパティを設定する set total(param:number): void { 
      this.count = パラメータ 
    } 
} 

3. @props

コンポーネントは属性のデコレータを受け取ります。これは次のように使用されます。

vue-property-decorator から {Component,Vue,Prop} をインポートします。 
 
@成分 
デフォルトのクラスをエクスポートし、YourComponent を Vue に拡張します { 
    @Prop(文字列) 
    propA: 文字列; 
     
    @Prop([文字列,数値]) 
    propB:文字列|数値; 
     
    @Prop({ 
     型: 文字列、// 型: [文字列、数値] 
     default: 'デフォルト値', // 通常は文字列または数値 
      // オブジェクトまたは配列の場合。デフォルト値はファクトリー関数から返されます // default: () => { 
      // ['a','b'] を返す 
      // } 
     必須: true、 
     バリデータ: (値) => { 
        戻る [ 
          「進行中」、 
          「落ち着いた」 
        ].indexOf(値) !== -1 
     } 
    }) 
    propC: 文字列; 
} 


4. @ウォッチ

これは実際には Vue のリスナーであり、次のようになります。

'vue-property-decorator' から { Vue, Component, Watch } をインポートします。 
 
@成分 
デフォルトのクラスをエクスポートし、YourComponent を Vue に拡張します { 
  @Watch('子') 
  onChildChanged(値: 文字列、古い値: 文字列) {} 
 
  @Watch('person', { 即時: true, ディープ: true }) 
  onPersonChanged1(val: Person、oldVal: Person) {} 
 
  @Watch('人') 
  onPersonChanged2(val: Person、oldVal: Person) {} 
} 


5. @エミット

vue-property-decoratorによって提供される@Emitデコレータは、次のように Vue のイベントの$emitトリガーを置き換えます。

'vue-property-decorator' から {Vue, Component, Emit} をインポートします。 
    @成分({}) 
    デフォルトのクラスをエクスポートし、Some extends Vue{ 
        マウントされた(){ 
            this.$on('emit-todo', 関数(n) { 
                コンソール.log(n) 
            }) 
            this.emitTodo('world'); 
        } 
        @エミット() 
        出力Todo(n: 文字列){ 
            コンソールにログ出力します。 
        } 
    } 

結論

上記のtypescript版のvue classの構文は、通常のjavascript版とはかなり異なっていることがわかります。クラスとデコレータは多くの場所で使用されていますが、実際には本質は同じです。継続的に書くことによってのみ、それを習得することができます。

VueプロジェクトでTypeScriptを適用する方法についてはこれで終わりです。Vue プロジェクトでTypeScript適用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript 列挙型
  • TypeScript の基本型の紹介
  • TypeScriptの列挙型を詳しく説明する
  • TypeScript における型保護の詳細な説明
  • TypeScriptの型保護メカニズムについての簡単な説明
  • TypeScript のクラス

<<:  Linuxのpasswdコマンドの使用

>>:  MySQL マスタースレーブレプリケーションの詳細な分析

推薦する

Zabbixを介してデータベース接続情報といくつかの拡張機能をすばやく取得します

背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...

小さな画面のモバイルデバイス向けにWebページを設計する際に注意すべきこと

その理由は、このタイプの Web ページが WAP と呼ばれるワイヤレス プロトコルから生成されたた...

Docker MQTT のインストールと使用のチュートリアル

MQTT の紹介MQTT (Message Queuing Telemetry Transport)...

IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明

目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...

Ubuntu 16.04 mysql5.7.17 リモートポート 3306 を開く

MySQLへのリモートアクセスを有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

HTTPS の有効化に関する経験の共有

国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...

CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...

アニメーションとトランジションの違い

CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...

VueはTeleportをベースにModalコンポーネントを実装します

目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...

vuex データの永続化のための 2 つの実装ソリューション

目次ビジネス要件:解決策 1: vuex-persistedstate解決策2: vuex-pers...

CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する

1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...

Vueプラグインの詳しい説明

要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....

高同時実行シナリオにおける nginx 最適化の詳細な説明

日常の運用・保守作業では、nginx サービスが頻繁に使用され、nginx の高同時実行性によって生...

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...