Vue3.0 + TypeScript + Vite初体験の詳しい説明

プロジェクトの作成

: : 翻訳:

$ npm init vite-app <プロジェクト名>
$ cd <プロジェクト名>
$ npmインストール
$ npm 実行 dev

または糸:

$ yarn create vite-app <プロジェクト名>
$ cd <プロジェクト名>
$ 糸
$ 糸開発

プロジェクト構造

メイン.js

私の意見では、createApp() は vue アプリケーションのインスタンスであり、createApp はチェーン呼び出しをサポートしています。

アプリ.vue:

これはvue2.0と互換性のある構文です。以下はvue3.0のrfcの記述方法です（まだ実験段階です）。
RFC公式説明

設定

データ

セットアップは、作成されたvue2.0のライフサイクル機能とデータおよびメソッド（後述）を組み合わせる

属性（データ）とメソッド（メソッド）を直接エクスポートできます

現在の名前はレスポンシブではないことがわかります。レスポンシブ性については後ほど紹介します。

方法

方法はデータと同じで、直接エクスポートします

効果：

コンポジションAPI

参照

声明：

Refはいくつかの基本的なプロパティをレスポンシブにすることができます

反応的な

上の図は、reactive と ref を混在させて使用した場合を示しています。効果については、以下のコードをコピーして体験してください。

<テンプレート>
 <div id="アプリ">
 <div v-for="(item, index) in state.persons" :key="index">
  {{ item.name }} は {{ item.age }} 歳です</div>
 <div>
  <h3>zhangsan の年齢を修正</h3>
  <input type="text" v-model="zAge" />
 </div>
 </div>
</テンプレート>

<script lang="ts" setup="props, {emit}">
'vue' から { reactive, ref } をインポートします。
エクスポートconst zAge = ref(12)
エクスポートconst状態=リアクティブ({
 人数:
 {
  名前: 'zhangsan'、
  年齢: zAge
 },
 {
  名前: 'lisi',
  年齢: 20
 }
 ]
})
</スクリプト>

計算された

声明：

効果：

ウォッチエフェクト

声明：

効果：

コンポーネントシステム

グローバル登録

アプリ.vue

メイン.js

部分登録

アプリ.vue

設定

小道具

props オブジェクトを宣言します。watchEffect では、console.log(props.msg) を使用して、親コンポーネントから渡された値を確認します。プロパティのデフォルト値とフィルタリングは現在検討中です。具体的な機能については、vue2.0 propsの機能を参照してください。

コンテクスト

コンポーネントコンテキスト

放出する

放出関数を宣言します。setup="props, {emit}" 内に放出を記述します。そうしないとエラーが報告されます。具体的な関数については、vue2.0 の放出関数を参照してください。

以下に、emit 関数の使用例をいくつか示します。

属性

調査中…

スロット

調査中…

vue ディレクティブ

v-modelに焦点を当て、他のvue命令は2.0と同じです

vモデル

Vue3.0 では、vue2.0 では利用できなかった複数の双方向バインディング パラメータのサポートが開始されました。v-model の後に他の属性がない場合、このコンポーネント内のデフォルト値は modelValue になります。v-model を更新する場合は、 emit('update:modelValue', data)を実行して、v-model のデフォルト値 modelValue を更新する必要があります。 v-model の後に属性 (dragValue) がある場合、このコンポーネント内の値はこの属性名 (dragValue) になります。v-model:dragValue の値を更新する場合は、 emit('update:dragValue', data)を実行して v-model のカスタム値を更新する必要があります。

詳しい使用方法については、公式ドキュメントを参照してください: https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md

Vue3.0 + TypeScript + Vite の初期体験に関するこの記事はこれで終わりです。Vue3.0 TypeScript Vite 関連のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。