vue プロジェクトには vue インスタンスが 1 つだけありますか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

vue プロジェクトには vue インスタンスが 1 つだけありますか?

青灯夜游

Dec 19, 2022 pm 03:25 PM

vue vue3

いいえ、vue プロジェクトには複数の vue インスタンスを含めることができます。 vue プロジェクトでは、通常、main.js で定義される VUE インスタンスは 1 つだけで、残りは vue コンポーネントインスタンスです。 Vue はインスタンスから構築されます。コンポーネントは Vue のインスタンスです。プロパティは各コンポーネント内に書き込むことができるため、各コンポーネントは Vue のインスタンスになります。

vue プロジェクトには vue インスタンスが 1 つだけありますか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

いいえ、vue プロジェクトには複数の vue インスタンスを含めることができます。

Vue はインスタンスから構築されます。コンポーネントは Vue のインスタンスです。プロパティは各コンポーネント内に書き込むことができるため、各コンポーネントは Vue のインスタンスになります。 vue プロジェクトでは、通常、main.js で定義される VUE インスタンスは 1 つだけで、残りは vue コンポーネントインスタンスです。

Vue インスタンス

Vue を使用してプロジェクトを作成する場合、最も重要なのは Vue インスタンスであり、Vue を学習するための方向性を提供します。 Vue インスタンス関連の「機能」が私たちの最終目標です。

まず、HTML ファイルに vue.js を読み込みます。スクリプトタグを使用して vue.js ファイルを直接読み込むことができます:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<body>

ログイン後にコピー

このページをブラウザで開き、次のように入力します。コンソール Vue を見ると、Vue は本質的に関数であることがわかります。

vue プロジェクトには vue インスタンスが 1 つだけありますか?

実際、Vue はコンストラクターであり、「クラス」とみなすことができます。新しいインスタンスを通じて作成されます。では、1 ページに作成できるインスタンスの数はいくつでしょうか?

通常、ページ内に作成される Vue インスタンスは 1 つだけです:

<body>
    <div id="app">Hello {{ msg }}</div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: &#39;前端小课&#39;
                }
            }
        });
</script>
</body>

ログイン後にコピー

Vue インスタンスを作成するとき、「カスタマイズされた」オブジェクトが渡されます。上記のオブジェクトを別のオブジェクトに変更できます。記述方法:

<body>
    <div id="app">Hello {{ msg }}</div>
    <script>
        const obj = {
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: &#39;前端小课&#39;
                }
            }
        }
        const vm = new Vue(obj);
</script>
</body>

ログイン後にコピー

obj オブジェクトには、Vue インスタンスに提供される「テンプレート」を表す el 属性があります。レンダリングされる HTML が What であることを Vue に伝え、HTML と obj で実行されることの間にある種の接続を確立する方法を教えます。たとえば、HTML テンプレートに表示されるデータを Vue インスタンスのデータに関連付ける方法や、HTML テンプレートでトリガーされるイベントに応答する方法などです。関連付けを確立するには、テンプレートと Vue インスタンスの間で契約を結ぶ必要があります。

el はセレクターまたは HTMLElement (DOM を開くデザインアーキテクチャ) インスタンスにすることができます。 el は次のように記述できます:

el: document.getElementById(&#39;app&#39;),

ログイン後にコピー

または任意のセレクタでも構いません:

 el: &#39;div&#39;,

ログイン後にコピー

以下に表示される結果は何ですか?

vue プロジェクトには vue インスタンスが 1 つだけありますか?

タイトル「おはようございます、チェックイン!」の値が HTML にレンダリングされていないことが最終的にわかりました。これは、タイトルが配置されている div がスコープ内にないためです。 Vue インスタンスの内部、つまり、Vue インスタンスは、インスタンスが作成されたテンプレート (el が指すテンプレートなど) にのみ影響します。 #実際には、1 つのページで複数の Vue インスタンスを作成できます。たとえば、次のコードは 3 つの Vue インスタンスを作成し、それらが正常に動作することがわかります。

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <div id="app-body">
        <h4>{{ title }}</h4>
    </div>
    <div class="app-footer">
        <h4>{{ footer }}</h4>
    </div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: "欢迎来到前端小课",
                }
            }
        });
</script>
    <script>
        const vmBody = new Vue({
            el: &#39;#app-body&#39;,
            data: function () {
                return {
                    title: "Vue 实例讲解"
                }
            }
        });
</script>
    <script>
        const vmFooter = new Vue({
            el: &#39;.app-footer&#39;,
            data: function () {
                return {
                    footer: "感谢阅读",
                }
            }
        });
</script>
</body>

ログイン後にコピー

ブラウザで開くと、結果は次のようになります。 vue プロジェクトには vue インスタンスが 1 つだけありますか?

この例はコンポーネントを思い出させます。「コンポーネントは再利用可能な Vue インスタンスです。」この書き方はコンポーネントに少し似ています。各 Vue インスタンスはコンポーネントとみなされます。

別の例を見てみましょう - Vue インスタンス内にネストされた Vue インスタンス:

vue プロジェクトには vue インスタンスが 1 つだけありますか?

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <!-- 这里不能声明一个新的 Vue 实例 -->
        <div id="app-body">
            <h4>会渲染吗？{{ title }}</h4>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: "欢迎来到前端小课",
                    title: "#app - Vue 实例讲解"
                }
            }
        });
</script>
    <script>
        const vmBody = new Vue({
            el: &#39;#app-body&#39;,
            data: function () {
                return {
                    title: "#app-body - Vue 实例讲解"
                }
            }
        });
</script>
</body>

ログイン後にコピー

レンダリング結果は、#app 内のデータを使用していることがわかります。インスタンス:

Vue インスタンスには多数の API があり、各 API について段階的に学習する必要があります。たとえば、ライフサイクル関数、計算されたプロパティ、定義メソッド、フィルター:

vue プロジェクトには vue インスタンスが 1 つだけありますか?

##[関連する推奨事項:

vuejs ビデオチュートリアル vue プロジェクトには vue インスタンスが 1 つだけありますか? 、

Web フロントエンド開発

] vue プロジェクトには vue インスタンスが 1 つだけありますか?

以上がvue プロジェクトには vue インスタンスが 1 つだけありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1662

CakePHP チュートリアル

1418

Laravel チュートリアル

1311

PHP チュートリアル

1261

C# チュートリアル

1234

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vue Multi-Page開発とはどういう意味ですか？ Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

React vs. Vue：Netflixはどのフレームワークを使用していますか？ Apr 14, 2025 am 12:19 AM

netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.

VUEトラバーサルの使用方法 Apr 07, 2025 pm 11:48 PM

Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。