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を介してインポートして参照することで、次のようにします。 './ComponentA.vue' から ComponentA をインポートします。 新しいVue({ el: '#app', コンポーネント:{ コンポーネントA: コンポーネントA //ES6構文では、属性と属性値が同じ場合、1つの//ComponentAしか記述できません。 } }) <div id="アプリ"> <コンポーネントA></コンポーネントA> </div> 要約する よりモジュール化され、より明確な構造を持つ最後のモジュール システム コンポーネントを使用することをお勧めします。 小道具外部データとも呼ばれるプロパティは、通常、コンポーネント内で外部データを受け入れるために使用されます。コンポーネントが使用されると、タグのグローバル属性を通じて渡されます。以下は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内の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説
>>: Linux ディスクデバイスと LVM 管理コマンドの詳細な例
スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...
ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...
計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...
序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...
述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...
メインライブラリの構成1. MySQLを設定する vim /etc/my.cn # ファイルに次の内...
ローカルEclipse上にTomcatサーバーを作成する場合、 tomcaインストールディレクトリの...
目次MVCとMVVMの違い前述のMVCC の概要長所と短所MVVM概要MVVM 実装者 — Vue ...
これは公式のスクリーンショットです。MySQL 5.7 をインストールすると、デフォルトのパスワード...
目次序文インストール導入環境の切り替え傍受を要求するレスポンスインターセプションAPIの統合管理要約...
1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...
この記事では、CSS3 を使用した Web サイトの商品表示の効果を紹介し、皆さんと共有します。詳細...
2005年に業界に入ってから数か月後、労働者の日休みの期間中、1か月以上毎日12時まで残業をしました...
親ファイル React をインポートし、{useState} を 'react' か...
目次通常のページングクエリ最適化する方法大きなオフセット使用ID制限大量データ問題の最適化通常のペー...