ホームページ > 記事 > ウェブフロントエンド > vue.js インスタンス オブジェクトとコンポーネント ツリー インスタンスの詳細な説明
この記事では主に vue.js インスタンス オブジェクト + コンポーネント ツリーの関連情報を紹介します。必要な方は参考にしていただければ幸いです。
vueのインスタンスオブジェクト
まず、jsの新しいキーワードを使用してvueをインスタンス化します
el: vueコンポーネントまたはオブジェクトがページ上でロードされる場所。ID、クラス、またはタグ名によってロードできます
template : ロードされたコンテンツ。命令または他のコンポーネントを含む HTML コード/HTML フラグメント。テンプレートは使用するテンプレートになります
**data:** データはデータを通じてコンポーネントに導入されます
コンポーネント内のデータは関数の形式でデータを返す必要があります異なるインターフェースが同じコンポーネントを使用する場合、1 つのコンポーネントの値が変更され、他のページのコンテンツが変更されるとは考えられません。
{{ }} データ変数を二重括弧構文に入れます
コンポーネント登録構文のシュガー
グローバルコンポーネント
メソッド:
Vue.extend() メソッドを呼び出してコンポーネントコンストラクターを作成します
Vueを呼び出す .component(コンポーネントラベル、コンポーネントコンストラクター)メソッドでコンポーネントを登録します
コンポーネントはVueインスタンスのスコープ内でのみ使用できます
/*A方法全局组件1:*/ //1.Vue.extend() 创建组件构造器 var mycomponent = Vue.extend({ /*组件内容*/ template:…… , data: …… }) //2.Vue.component注册组件 Vue.component('my-component1', mycomponent);
Bメソッド(Aメソッドと同じ、簡単な書き方です) ):
Aメソッドはありません 最初のステップは、Vue.component(ラベル名、オプションオブジェクト)メソッドを直接呼び出すことです
/*B方法 全局组件2:*/ Vue.component('my-component2', { /*组件内容*/ template:…… , data: …… } /*在html中的组件调用,把组件标签直接用在html中相应的位置即可*/ <mycomponent1></mycomponent1> <mycomponent2></mycomponent2>
ローカルコンポーネントはコンポーネント属性を使用します
"javascript var partcomponent2 = { el:…… , data: { …… } } new Vue({ el: '#app', data: { …… }, components: { /* A方法: 局部组件1 / 'part-component1': partcomponent1 }, /B方法 局部组件2 */ 'part-component2':{ el:…… , data: { …… } } }) "
サブコンポーネント
作成方法は次のようになります上記 2 つの方法の違いは、位置がコンポーネント内部に配置されることです。
var compentChild ={ el:……, data:…… } component: { el: ……, data: {……} components: { 'component-child': componentChild } }
組み込みコンポーネント
コンポーネント内でコンポーネントを宣言する必要はありません。代わりに、タグを直接使用してください。たとえば、以下に示すように myHeader で組み込みコンポーネントを使用する場合、root-view、keep-alived なども Vue 自体によって提供される組み込みコンポーネントです。
var myHeader = { template: '<component></component> <root-view></rooot-view>' }
関連する推奨事項:
vue.js 子コンポーネントを呼び出す親コンポーネントの内部メソッドの共有
Vue.js_vue の *.Vue ファイルの最初の紹介。 js
以上がvue.js インスタンス オブジェクトとコンポーネント ツリー インスタンスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。