templateラベルの使い方のまとめ(vueの使い方のまとめを含む)について

文書ディレクトリ

一、html 5のtemplateラベル

二、templateラベル操作の属性と方法

三、vueのtemplate

1、templateラベルvueインスタンスにバインドされた要素の内部

2、vueインスタンスのtemplateプロパティ

一、html 5のtemplateラベル
htmlのtemplateラベルの内容はページに表示されません.しかし、バックグラウンドビューページDOM構造にはtemplateのラベルがある.これはtemplateラベルが生まれつき見えないため、display:none;プロパティが設定されています.

<template><div>  templatediv>template>
<abc>       abcabc>

二、templateラベル操作の属性と方法

contentプロパティ:jsのtemplateラベルに対応するdomオブジェクトにはcontentプロパティがあり、対応するプロパティ値はdomノードであり、ノードのnodeNameはdocument-fragmentである.この属性によってtemplateタグの内容を取得することができ、template .contentはgetElementById、querySelector、querySelectorAllメソッドを呼び出して中のサブノードを取得することができる.

innerHTML:templateラベルのhtmlを取得できます.

<template id="tem">
    <div id="div1">  templatediv>
    <div>  templatediv>
template>
<script>
    let o = document.getElementById("tem");
    console.log(o.content.nodeName);//#document-fragment
    console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。       
    console.log(o.content.getElementById("div1"));//
  template
    console.log(o.innerHTML);//'
  template
  template
'
script>

三、vueのtemplate
1、templateラベルvueインスタンスにバインドされた要素の内部
これはtemplateラベルの内容を表示できますが、バックグラウンドを表示するdom構造にはtemplateラベルはありません.templateラベルがvueインスタンスにバインドされた要素の内部に置かれていない場合、デフォルトの内容はページに表示されませんが、バックグラウンドdom構造にtemplateラベルがあることを確認します.

<div id="app">
    
    <template>
        <div>  templatediv>
        <div>  templatediv>
    template>
div>

<template id="tem">
    <div id="div1">  templatediv>
    <div>  templatediv>
template>
<script src="node_modules/vue/dist/vue.js">script>
<script>
    let vm = new Vue({
        el: "#app",
    });
script>

注意:vueインスタンスにバインドされた要素内部のtemplateラベルは、v-showコマンドをサポートしていません.すなわち、v-show=「false」はtemplateラベルには機能しません.ただし、このときのtemplateラベルは、v-if、v-else-if、v-else、v-forなどのコマンドをサポートします.

<div id="app">
    <template v-if="true">
    
        <div>  templatediv>
        <div>  templatediv>
    template>
    <div v-if="true">
    
        <div>  templatediv>
        <div>  templatediv>
    div>
    
    <template v-for="a in 3">
        <div>  templatediv>
        <div>  templatediv>
    template>
div>
<script src="node_modules/vue/dist/vue.js">script>
<script>
    let vm = new Vue({
        el: "#app",
    });
script>

2、vueインスタンスのtemplate属性
インスタンスのtemplateプロパティ値をコンパイルし、コンパイルされたdomをvueインスタンスにバインドされた要素に置き換えます.vueインスタンスにバインドされた要素にコンテンツが存在する場合、これらの内容は直接上書きされます.特徴:

1)vueインスタンスにtemplate属性がある場合、その属性値がコンパイルされ、コンパイルされた仮想domがvueインスタンスにバインドされた要素(すなわちelバインドされた要素)を直接置き換える.

2)templateプロパティのdom構造には1つのルート要素しかありません.複数のルート要素がある場合は、v-if、v-else、v-else-ifを使用して1つのルート要素のみを表示するように設定する必要があります.

)この属性に対応する属性値には、vueインスタンスdata、methodsで定義されたデータを使用することができる.

<div id="app">div>

<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
template>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"#first"//            template          app   ，            ，     dom     template  
    });
script>

上記の例ではhtmlのtemplateタグは、以下のようにカスタマイズされたタグにすることができる.しかし、以下のようにラベルの内容をapp要素に置き換えることもできますが、ラベルの内容もページに表示されます.したがって、ここではtemplateラベルを使用して、vueインスタンスで設定する必要があるtemplateプロパティを定義します.

<abc id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
abc>

上記の例は以下のように書くこともできます.

<div id="app">div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"
{{msg}}
123
"//           ，         v-if、v-else、v-else-if        
    });
script>