テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

1. HTML5のテンプレートタグ

HTML のtemplateタグ内のコンテンツはページには表示されません。ただし、バックグラウンドでページの DOM 構造を表示すると、 templateタグが存在します。これは、テンプレート タグが本質的に不可視であるため、 display:none;属性が設定されるからです。

<!-- 現在のページには、「私はカスタム式 abc です」という内容のみが表示され、「私はテンプレートです」という内容は表示されません。これは、テンプレート タグが本質的に不可視であるためです -->
<template><div>私はテンプレートです</div></template>
<abc>私はカスタム表現 abc です</abc>

2. テンプレートタグ操作のプロパティとメソッド

  • content属性: js では、テンプレート タグに対応する DOM オブジェクトに content 属性があり、対応する属性値は DOM ノードであり、ノードの nodeName は #document-fragment です。このプロパティは、テンプレート タグ内のコンテンツを取得するために使用できます。 template對象.content 、getElementById、querySelector、および querySelectorAll メソッドを呼び出して、内部の子ノードを取得できます。
  • innerHTML : テンプレート タグ内の HTML を取得できます。
<テンプレートid="テンプレート">
 <div id="div1">私はテンプレートです</div>
 <div>私はテンプレートです</div>
</テンプレート>
<スクリプト>
 o = document.getElementById("tem"); とします。
 console.log(o.content.nodeName);//#ドキュメントフラグメント
 console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div].クラス配列を取得します console.log(o.content.getElementById("div1"));//<div id="div1">私はテンプレートです</div>
 console.log(o.innerHTML);//'<div id="div1">私はテンプレートです</div><div>私はテンプレートです</div>'
</スクリプト>

3. Vueのテンプレート

1. テンプレートタグはvueインスタンスにバインドされた要素内にあります

テンプレートタグ内のコンテンツを表示できますが、背景の DOM 構造を確認するとテンプレートタグが存在しません。 Vue インスタンスにバインドされた要素内にテンプレート タグが配置されていない場合、その中のコンテンツはデフォルトではページに表示できませんが、バックグラウンド DOM 構造内にテンプレート タグが存在します。

<div id="アプリ">
 <!--ここではテンプレート タグの内容が表示されており、テンプレート タグは DOM 内に存在しません-->
 <テンプレート>
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </テンプレート>
</div>
<!--ここでのテンプレート タグの内容はページには表示されませんが、タグとその内部構造は DOM 構造内に存在します-->
<テンプレートid="テンプレート">
 <div id="div1">私はテンプレートです</div>
 <div>私はテンプレートです</div>
</テンプレート>
<script src="node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el: "#app",
 });
</スクリプト>

注意: vue インスタンスにバインドされた要素内のテンプレート タグは v-show ディレクティブをサポートしていません。つまり、v-show="false" はテンプレート タグでは機能しません。ただし、テンプレート タグは v-if、v-else-if、v-else、v-for 命令をサポートするようになりました。

<div id="アプリ">
 <テンプレートv-if="true">
 <!--この時点では、テンプレート タグ内のコンテンツがページに表示されますが、DOM 構造にはテンプレート タグがありません-->
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </テンプレート>
 <div v-if="true">
 <!--div タグ内のコンテンツがページに表示され、DOM 構造には最も外側の div タグが含まれます-->
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </div>
 <!--6 ここでは「I am template」が出力され、DOM 構造にはテンプレート タグがありません -->
 <テンプレート v-for="a in 3">
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </テンプレート>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el: "#app",
 });
</スクリプト>

2. Vueインスタンスのテンプレートプロパティ

インスタンス内のテンプレート属性値をコンパイルし、Vue インスタンスにバインドされた要素をコンパイルされた DOM に置き換えます。Vue インスタンスにバインドされた要素にコンテンツがある場合は、そのコンテンツが直接上書きされます。
特徴:

1) Vue インスタンスにテンプレート属性がある場合、属性値がコンパイルされ、コンパイルされた仮想 DOM が Vue インスタンスにバインドされた要素 (つまり、el にバインドされた要素) を直接置き換えます。
2) テンプレート属性内の DOM 構造には、ルート要素を 1 つだけ含めることができます。ルート要素が複数ある場合は、v-if、v-else、v-else-if を使用して、ルート要素の 1 つだけを表示するように設定する必要があります。
3) この属性に対応する属性値には、Vue インスタンスデータおよびメソッドで定義されたデータを使用できます。
<!--このページにはhelloが表示されます-->
<div id="アプリ"></div>
<!--ここでのテンプレート タグは、vue にバインドされた要素の外側で定義する必要があり、次のテンプレート タグの内容はページに表示されません -->
<テンプレートid="first">
 <div v-if="flag">{{msg} } <div>
 <div v-else>111<div>
</テンプレート>
<script src="./node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el:"#アプリ",
 データ:{
  メッセージ:「こんにちは」、
  フラグ:true
 },
 template:"#first" //このプロパティを使用すると、カスタム テンプレート プロパティ内のすべてのコンテンツをアプリのコンテンツに置き換えることができます。また、その中の元のコンテンツは上書きされ、DOM 構造を表示するときにテンプレート タグは表示されません});
</スクリプト>

上記の例では、HTML 内のテンプレート タグを次のようにカスタム タグに変更できます。ただし、次の方法では、アプリ要素を<abc></abc>タグ内のコンテンツに置き換えることもできますが、 <abc></abc>タグ内のコンテンツもページに表示されます。したがって、ここではテンプレート タグを使用して、Vue インスタンスで設定する必要があるテンプレート プロパティを定義します。

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

上記の例は次のようにも書ける。

<!--このページにはhelloが表示されます-->
<div id="アプリ"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el:"#アプリ",
 データ:{
  メッセージ:「こんにちは」、
  フラグ:true
 },
 template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//テンプレートにはルート要素が 1 つだけ存在できます。複数ある場合は、v-if、v-else、v-else-if を使用して、表示する要素を選択する必要があります});
</スクリプト>

テンプレートタグの詳しい使い方(vueでの使い方のまとめも含む)については以上です。テンプレートタグの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue でテンプレートを書く 3 つの方法の例
  • Vue2 テンプレートの書き方 4 つの方法のまとめ
  • Vue はテンプレート内のタグコンテンツをどのようにレンダリングしますか?
  • Vue テンプレートが複数のルートノードをサポートする方法の詳細な説明
  • VUEでテンプレートを書く3つの方法

<<:  jsは動的にテーブルを生成します(ノード操作)

>>:  Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介

推薦する

訪問者を惹きつけるウェブサイトコンテンツを作成する14の方法

ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...

HTML タグ sup と sub の応用の紹介

HTML タグ: 上付き文字HTML では、<sup> タグは上付き文字のテキストを定義...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

CSSボックスの表示/非表示とトップレイヤーの実装コード

.imgbox{ 幅: 1200ピクセル; 高さ: 612px; 右マージン: 自動; 左マージン...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

Vue3 がコンポーネント通信に mitt を使用する手順

目次1. インストール2. プロジェクトにインポートしてマウントする3. 使用Vue2.x はコンポ...

MySQL テーブル フィールドの時間設定のデフォルト値

アプリケーションシナリオデータ テーブルでは、アプリケーションは各データがいつ作成されたかを記録する...

詳細なLinuxインストールチュートリアル

(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...

CSS でテキストシャドウと要素シャドウ効果を使用する

テキストシャドウの紹介CSSでは、 text-shadowプロパティを使用してテキストの影を設定しま...

Vue ベースの円形スクロールリスト機能を実装する

注: 親コンテナーに高さと :data='Array' および overfolw:h...

Javascript DOM、ノード、要素取得の紹介

目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...

Vue パッケージ化後の空白ページの解決策

1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

AES_ENCRYPT() と AES_DECRYPT() を使用して MySQL を暗号化および復号化する正しい方法の例

序文最近、仕事でAES_ENCRYPT()関数を使用してプレーンテキストを暗号化し、MySQL に保...

MySQL ページング分析の原理と効率改善

MySQL ページング分析の原理と効率改善PERCONA PERFORMANCE CONFERENC...