CSSセレクタでコンポーネントを作成しますか？

Question

カスタムHTMLタグの名前の代わりにCSSセレクタを渡してVueコンポーネントを作成できますか？また、テンプレートプレースホルダにカスタム以外のHTMLタグを使用することもできますか？

私はカスタムHTMLタグのSEOの影響に注意しているので、私は尋ねます。

Answer 1

まず、セレクタまたは要素#idを使用してコンポーネントを定義することができます。しかし、私があなたが欲しいものを正しく理解すれば、あなたが思っているようにはうまくいかない。

この方法は広く使用されていないか、またはよく文書化されていません。link & linkですが、xテンプレートと呼ばれるものを使用できます。コンポーネントは次のように定義します。

Vue.component('my-cool-component', { 
    template: '#my-cool-component', //refers to script tag id 
      data() { 
       // 
      }, 
      methods: { 
       // 
      } 
}); 

次に、あなたのコンポーネントから設定されたテンプレートIDを持つ「テキスト/ X-テンプレート」スクリプトタグ内のHTMLでの実際のテンプレートのマークアップが含まれています。

<script type="text/x-template" id="my-cool-component"> 
    <section> 
     <h1>Title</h1> 
     <p>...</p> 
    </section> 
</script> 

上記の場合、標準のhtmlタグを使用することができます。

テンプレートのコンポーネントには、レンダリング時にVue.jsによって解析されるため、心配することなくカスタムhtmlタグを使用することができます。あなたのページのマークアップで、あなたは次のように代わりにテンプレートリテラルを使用してコンポーネントに直接マークアップテンプレート全て、

Vue.component('my-cool-component', { 
    template: `<section> 
        <h1>Title</h1> 
        <p>...</p> 
       </section>', 
      data() { 
       // 
      }, 
      methods: { 
       // 
      } 
}); 

を書くとしたら、あなたのカスタムHTML要素タグを含む場合たとえば<my-cool-component></my-cool-component> Vueがタグを削除のみしますテンプレートのマークアップをレンダリングします。

<section> 
    <h1>Title</h1> 
    <p>...</p> 
</section> 

Answer 2

私はあなたの質問が正しいかどうかわかりませんが、実際にはこれらのカスタムタグはテンプレートプレースホルダのようにレンダリングされません。すべてのテンプレートプレースホルダーを実際のテンプレートで変形します。次の例を参照してください。

CustomComponent.vueを

<template><div class="child">Hello World</div></template> 

<script> 
export default { 
    name: 'CustomComponent' 
} 
</script> 

親コンポーネント：これは、あなたが本当にしている場合、この

<div class="parent"><div class="child">Hello World</div></div> 

ようになりますDOMをレンダリングします

<template> 
    <div class="parent"><custom-component></custom-component></div> 
</template> 

<script> 
import CustomComponent from './CustomComponent' 

export default { 
    components: { 
    CustomComponent 
    } 
} 
</script> 

最高経営責任者（CEO）について心配している私はserver-side renderingを調べることをお勧めします。そうしないと、すべてのビューコンポーネントがクライアント上でJavaScriptの実行を使用してレンダリングされます。検索エンジンのクローラがjavascriptを実行しているかどうか、ページがレンダリングされるまでどのくらいの時間待つかはわかりません。