プロジェクトの作成: : 翻訳: $ 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インデックスの使用に関するヒントと注意事項
この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...
この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...
多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...
証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...
知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...
この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します...
Linux システムでは、ユーザーが手動で作成したさまざまなアカウントに加えて、システムまたはプログ...
VirtualBoxのインストールディレクトリを見つけます。ディレクトリ内には容量を拡張するために...
レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...
<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...
目次1. システムイメージファイルをダウンロードする2. 新しい仮想マシンを作成する3. Kali ...
Confluence は有料ですが、クラックして使用できます (購入が推奨され、正規版がサポートされ...
Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...
この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...
ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分がで...