vue.jsにコンポーネントを登録する方法

vue.js にコンポーネントを登録する方法: 1. extend を使用します。コードは [var com1 = Vue.extend({template:'

これが最初の方法です

' } )]; 2. ページ上に外部テンプレート要素を定義します。

このチュートリアルの動作環境: Windows10 システム、vue2.5.2、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事: vue.js】

vue.js にコンポーネントを登録する方法:

最初の拡張方法:

vue.js で次のように記述します:

var com1 = Vue.extend({
   template:&#39;<h3 id="这是第一种方式">这是第一种方式</h3>&#39;
});
Vue.component("myCom1",com1);

注: myCom1 はキャメル ケースの命名方法を採用しているため、HTML では次のように記述します。

<my-com1></my-com1>

注: キャメルケースの名前付けを使用しない場合、js および html では次のように記述されます:

vue.js では次のように記述されます:

var com1 = Vue.extend({
    template:&#39;<h3 id="这是第一种方式">这是第一种方式</h3>&#39;
});
Vue.component("mycom1",com1);

HTML では次のように記述されます:

<mycom1></mycom1>

上記の中間変数は使用できません。つまり、次のように com1 の内容を Vue.component("mycom1", com1) に直接書き込むことはできません。

Vue.component("mycom1",Vue.extend({
    template:&#39;<h3 id="这是第一种方式">这是第一种方式</h3>&#39;
}));

2 番目の方法: 拡張する必要はありません

これを vue.js で記述します:

Vue.component("mycom1",{
    template:&#39;<div><h3 id="这是h-标签">这是h3标签</h3><span>这是span标签</span></div>&#39;
});

注: コンポーネントがどの方法で作成されたとしても、ルート要素は 1 つだけである必要があります。つまり、複数の HTML 要素がある場合は、

html の div パッケージは次のようになります:

<mycom1></mycom1>

3 番目の方法: 外部テンプレートを定義します。ページ上の要素

vue.js で次のように記述します:

Vue.component("mycom1",{
    template:'#temp'
});

HTML でテンプレート構造を記述します:

<template id="temp">
    <h3 id="这是html中的temp">这是html中的temp</h3>
</template>

PS: 上記は次のとおりです

最初のローカル登録:

js ファイルに書き込みます:

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: &#39;<div><h3 id="这是局部template">这是局部template</h3></div>&#39;
        }
    }
});

html ファイルに書き込みます:

<mycom1></mycom1>

2 番目の部分登録タイプ:

js ファイルに次のように記述します:

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: '#temp'
        }
    }
});

HTML ファイルに記述します:

<template id="temp">
    <div><h3 id="这是局部template啦">这是局部template啦</h3></div>
</template>

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がvue.jsにコンポーネントを登録する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。