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インデックスの使用に関するヒントと注意事項

推薦する

上部の固定ナビゲーションバーによって CSS アンカーの配置がブロックされる問題の解決方法

多くのウェブサイトでは、ユーザーが簡単に検索したり他のページに移動したりできるように、上部にナビゲー...

Zabbixは複数のmysqlプロセスの監視を実装します

1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...

MySQL の異常なエラー ERROR: 2002 を解決する方法

最近、MySQL の起動中にエラーが発生しました。エラー メッセージは次のとおりです。 エラー 20...

...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...

CSSスタイルとセレクターの使い方

HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

Viteは仮想ファイルの実装を導入します

目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...

MySQL インデックスの正しい使い方とインデックスの原理の詳細な説明

1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...

MySQL 1対多関連クエリのページングエラー問題の解決方法

XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...

Vueのログインとログアウトの詳細な説明

目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...

MySQL 5.7 クラスタ構成手順

目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...

DockerでLNMPアーキテクチャを展開する方法

環境要件: IPホスト名192.168.1.1ノード1プロジェクト計画:コンテナネットワークセグメン...

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...

VueでJSXを使用する方法

JSXとは何かJSX は Javascript の構文拡張であり、JSX = Javascript ...