プロジェクトの作成: : 翻訳: $ npm init vite-app <プロジェクト名> $ cd <プロジェクト名> $ npmインストール $ npm 実行 dev または糸: $ yarn create vite-app <プロジェクト名> $ cd <プロジェクト名> $ 糸 $ 糸開発 プロジェクト構造メイン.js私の意見では、createApp() は vue アプリケーションのインスタンスであり、createApp はチェーン呼び出しをサポートしています。 アプリ.vue:これはvue2.0と互換性のある構文です。以下はvue3.0の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 を更新する場合は、 詳しい使用方法については、公式ドキュメントを参照してください: 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux システムで Code Cloud にプロジェクトをアップロードする方法
>>: MySQLインデックスの使用に関するヒントと注意事項
多くのウェブサイトでは、ユーザーが簡単に検索したり他のページに移動したりできるように、上部にナビゲー...
1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...
最近、MySQL の起動中にエラーが発生しました。エラー メッセージは次のとおりです。 エラー 20...
公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...
HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通...
今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...
目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...
1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...
XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...
目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...
目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...
環境要件: IPホスト名192.168.1.1ノード1プロジェクト計画:コンテナネットワークセグメン...
HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...
JSXとは何かJSX は Javascript の構文拡張であり、JSX = Javascript ...