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

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

プロジェクトの作成

: : 翻訳:

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

または糸:

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

プロジェクト構造

ここに画像の説明を挿入

メイン.js

メイン.ts

私の意見では、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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vite と Vue CLI の長所と短所
  • vite2.0+vue3 モバイルプロジェクトの詳細な説明
  • vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明
  • Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します
  • vite を使用して vue3 アプリケーションを構築する方法
  • 古い Vue プロジェクトに Vite サポートを追加する方法

<<:  Linux システムで Code Cloud にプロジェクトをアップロードする方法

>>:  MySQLインデックスの使用に関するヒントと注意事項

推薦する

MySQL 5.6.37 (zip) ダウンロード インストール 構成 グラフィック チュートリアル

この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...

JavaScriptを使用してSMS認証コード間隔を送信する機能を実装する

多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

HTML ページ ヘッダー コード例の詳細な説明

知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...

JavaScript カスタム カレンダー効果

この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します...

Linuxアカウントファイル制御管理の詳細な手順

Linux システムでは、ユーザーが手動で作成したさまざまなアカウントに加えて、システムまたはプログ...

VirtualBox の仮想ディスク vdi ファイルの容量を拡張する方法 (グラフィック チュートリアル)

VirtualBoxのインストールディレクトリを見つけます。ディレクトリ内には容量を拡張するために...

CSS レスポンシブ レイアウト システムの例コード

レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...

Web デザイン ヘルプ: Web フォント サイズ データ リファレンス

<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...

仮想マシン VMware に Kali Linux をインストールする最新の超詳細なグラフィック チュートリアル

目次1. システムイメージファイルをダウンロードする2. 新しい仮想マシンを作成する3. Kali ...

Docker で Confluence をデプロイするための完全な手順

Confluence は有料ですが、クラックして使用できます (購入が推奨され、正規版がサポートされ...

Vue3 がデータ監視を実装するためにプロキシを使用する理由の分析

Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

ラベルとボタンを削除し、背景画像の点線/影を追加すると完璧な解決策になります

ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分がで...