テンプレートタグの使用方法の詳細な説明(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 の簡単な紹介

推薦する

SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明

目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...

Vue プロジェクトで addRoutes を使用する際の問題の解決策

目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...

MySQLデータベースが大きすぎる場合にバックアップと復元を行う方法

コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...

MySQL でインデックスとして B+Tree を使用する利点は何ですか?

目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...

Vue シンプル登録ページ + 確認コード送信機能の実装例

目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...

Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...

MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...

IE6/IE7/IE8/IE9/FF 向け CSS ハック (概要)

IE8.0の正式版をインストールしたので、基本的なCSS HACKをいくつかまとめてみました。We...

JavaScript 配列重複排除問題の詳細な研究

目次序文 👀リサーチを始めましょう🐱‍🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...

Ubuntu Linux に Git と GitHub をインストールして使用する

Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...

Linux で time(NULL) 関数と localtime() を使用して現在の時刻を取得する方法

time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...

MySQL 5.7 zip版(zip版)のインストールと設定手順の詳細

はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

Apache ストレステストツールのインストールと使用

1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...

シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...