Vueオプションの詳細な説明

Vueオプションの詳細な説明

1. オプションとは何ですか?

jQuery.js にしろ Vue.js にしろ、js をベースに再カプセル化されたライブラリであり、いずれも対応する操作をカプセル化するために対応するインスタンスを作成する必要があります。たとえば、jQuery オブジェクトとも呼ばれる $('div') を通じて jQuery div 要素インスタンスを取得できます。jQuery オブジェクトには、選択した div 要素に対するさまざまな操作 API が含まれているため、jQuery インスタンスは、選択した要素に対するさまざまな操作をカプセル化します。

Vue.js はさらに一歩進んで、データの読み取りと書き込み、データの変更の監視、DOM 要素の更新など、ビューのすべての操作をカプセル化します。Vue インスタンス (Vue オブジェクトとも呼ばれます) は、new Vue(options) を通じて作成されます。Vue インスタンスは、要素ビューを操作するためのすべての操作をカプセル化し、Vue インスタンスを通じて、該当領域のビューを簡単に操作できます。

2. 含まれる属性

オプション オブジェクトには多くの特定のオプション プロパティがあり、これらは 5 つのカテゴリに分類できます。これらは、vue.js の公式 Web サイトで次のように確認できます。

3. エントリー属性

エル

el 属性はマウント ポイントとも呼ばれ、要素の略語と考えることができます。Vue インスタンスを作成するには、どの要素で Vue インスタンスを作成するか、どのビューで操作するかを知る必要があります。

マウント ポイントを定義する方法は 2 つあります。

1. elプロパティを設定する

新しいVue({
  el: "#app",
  レンダリング: h => h(App)
})

2. $mountインターフェースを使用する

新しいVue({
  レンダリング: h => h(App)
}).$mount("#app");

データ

データ属性は内部データとも呼ばれます。属性値はオブジェクトまたは関数にすることができますが、関数を使用することをお勧めします。オブジェクト内の関数はメソッドとも呼ばれます。また、コンポーネント内のデータの場合は関数を使用する必要があります。

この関数が推奨される理由は、同じ options オブジェクトをパラメータとして複数の Vue インスタンスを作成する場合、data 属性値がオブジェクトであれば、new Vue(options) を使用して Vue インスタンスを作成すると、options.data 属性値が直接 Vue instance.data 属性に割り当てられます。オブジェクトの割り当てはコピーされたアドレスであるため、複数のインスタンスの data 属性値はすべて同じオブジェクトのアドレスを指します。複数のインスタンスはデータ オブジェクトを共有します。1 つのインスタンスがデータ オブジェクトを変更すると、別のインスタンスのデータ オブジェクトも変更されます。

data 属性値が関数の場合、Vue はインスタンスを作成するときに data() 関数を実行し、関数実行によって返されたオブジェクトを Vue インスタンスの .data 属性に割り当てます。関数が実行されるたびに、返されるオブジェクトは異なるオブジェクトです。そのため、複数のインスタンスの data 属性値は異なるオブジェクトに対応します。1 つのインスタンスを変更しても他のインスタンスには影響せず、互いに独立しています。

1. 使用目的

データ:{
    0 です
}

2. 関数を使用する

データ(){
    戻る {
      0 です
    }
}

方法

methods 属性はメソッドとも呼ばれます。属性値はオブジェクトです。オブジェクト内の属性はすべて関数です。これらの関数は、イベント処理のコールバック関数または通常の関数になります。特徴は、ページがレンダリングされるたびに、次のようにメソッドが実行されることです。

方法:{
    追加(){
      これ.n +=1
    }
}

コンポーネント

コンポーネントとは、再利用しやすいようにモジュール化の概念に基づいて設計された Vue インスタンスでもあるコンポーネントのことです。コンポーネントの使用方法は次の 3 つがあります。

1. グローバル登録

コンポーネントをグローバルに定義して、プロジェクト全体でいつでも使用できるようにします。定義方法は次のとおりです。

Vue.component('コンポーネント名', {  

    // ... オプション... この部分は、vue インスタンスを作成するためのオプションと同じです。結局のところ、コンポーネントは vue インスタンスです})
新しい Vue({ el: '#app' })
<div id="アプリ">
    <my-component-name></my-component-name>
</div>

2. ローカル登録

//通常のJavaScriptオブジェクトを通じてコン​​ポーネントを定義します var ComponentA = { options }

//次に、コンポーネントオプションで使用するコンポーネントを定義します new Vue({ 
    el: '#app',
    コンポーネント:
        コンポーネントa: ComponentA //またはその中にオブジェクトを直接定義します コンポーネントb: {
            // オプションと同じ内容ですが、データは関数である必要があります}
    } 
})
<div id="アプリ">
    <コンポーネント-a></コンポーネント-a>
</div>

3. モジュールシステム

コンポーネントを*.vueファイルに分離し、importを介してインポートして参照することで、次のようにします。
メイン.js

'./ComponentA.vue' から ComponentA をインポートします。
新しいVue({ 
    el: '#app',
    コンポーネント:{
        コンポーネントA: コンポーネントA
        //ES6構文では、属性と属性値が同じ場合、1つの//ComponentAしか記述できません。
    }
})
<div id="アプリ">
    <コンポーネントA></コンポーネントA>
</div>

要約する

よりモジュール化され、より明確な構造を持つ最後のモジュール システム コンポーネントを使用することをお勧めします。
完全な紹介については、vuejsの公式ウェブサイトのコンポーネントをご覧ください。

小道具

外部データとも呼ばれるプロパティは、通常、コンポーネント内で外部データを受け入れるために使用されます。コンポーネントが使用されると、タグのグローバル属性を通じて渡されます。以下はvue.jsのフルバージョンを導入した例です

HelloWorld.vue

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "HelloWorld",
  小道具: {
    メッセージ: 文字列
  }
};
</スクリプト>

データ転送

メイン.js

./HelloWorld.vue から HelloWorld をインポートします。
新しいVue({
    テンプレート:`
        <HelloWorld msg="hello my world"/> //これは文字列のみを渡すことができます <HelloWorld :msg="ms"/> //これは変数を渡すためのものです。つまり this.ms
        // 関数名を渡すこともできます <HelloWorld :msg="fn"/>
    `、
    データ:{
        ms: 「こんにちは、私の世界」
    },
    方法:{
        関数(){
            ...
        }
    }
})

ライフサイクルフック

Vue では、インスタンス作成後、インスタンス作成前など、各状態遷移ポイントをフックと呼びます。インスタンス作成はフックであり、インスタンス作成前の beforeCreate とインスタンス作成後の created という前後 2 つの段階に対応しています。以下はペアで登場するので、どちらか 1 つだけ覚えておけば大丈夫です。

このプロパティは、対応する期間に呼び出される関数です。

  • 作成されたインスタンスがメモリに表示される
  • マウントされた(このフックでデータ要求を行うことができる)インスタンスがページに表示される
  • 更新されました インスタンスが更新されました
  • 破棄されたインスタンスはページとメモリから破棄されます

以上がVueのオプションについての詳しい説明です。Vueのオプションについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • Vue での this.$options.data() と this.$data の使用
  • Vueオプションの使用手順
  • Vueインスタンスのオブジェクトパラメータオプションのいくつかの一般的なオプションの詳細な説明
  • Vueのthis.$options.data()のthisポイント問題に基づいて

<<:  MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説

>>:  Linux ディスクデバイスと LVM 管理コマンドの詳細な例

推薦する

innerHTML を理解する

<br />関連記事: innerHTML HTML DOM insertRow() メ...

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

Mysql のいくつかの複雑な SQL ステートメント (重複行のクエリと削除)

1. 重複行を見つける blog_user_relation a から * を選択 WHERE (...

JavaScript ファイルの読み込みとブロックの問題: パフォーマンス最適化のケーススタディ

まず質問させてください。HTML ページを作成するときに、外部から JS ファイルをインポートする場...

Nginx で https をアップグレードする方法

購入証明書Alibaba CloudのCloud Shield証明書サービスから購入できます。証明書...

フラットスタイルを使用してウェブサイトをデザインする方法

フラットなウェブサイト構造の本質はシンプルさです。コンテンツの重要なポイントを強調し、ページの装飾効...

MySQLビューの原理と使用法の詳細な説明

この記事では、例を使用して MySQL ビューの原理と使用方法を説明します。ご参考までに、詳細は以下...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

DockerでJenkinsをインストールし、初期プラグインのインストール失敗の問題を解決する

Jenkins をインストールした後、プラグインの初期ダウンロードが常に失敗し、インストールが失敗し...

MySQL5.7 シングルインスタンス自動起動サービスの設定プロセス

1.MySQLのバージョン [root@clq システム]# mysql -v MySQL モニター...

CentOS で新しいユーザーを作成し、キーログインを有効にする方法

目次新しいユーザーを作成する新規ユーザーを承認する新規ユーザーのSSHキーログインを有効にする他のS...

CSS オーバーフローラップの新しいプロパティ値をどこでも使用

1.まず、overflow-wrap属性を理解する CSS のoverflow-wrapプロパティは...

MySQL 8の新機能ウィンドウ関数の役割

MySQL 8.0 の新機能は次のとおりです。 Unicode 9.0 をすぐに完全にサポートウィン...

HTMLコードテキストボックスの制限入力テキストボックスが灰色になり、制限テキストボックスの入力

方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...