検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Vue.js でコンポーネント テンプレートを定義するいくつかの方法の紹介

Vue.js でコンポーネント テンプレートを定義するいくつかの方法の紹介

PHPz
PHPz転載
2020-09-25 15:46:572719ブラウズ

Vue.js でコンポーネント テンプレートを定義するいくつかの方法の紹介

Vue.js は、開発者が基礎となる Vue インスタンスのデータに DOM を宣言的にバインドできるようにする HTML ベースのテンプレート構文を使用します。すべての Vue.js テンプレートは正当な HTML であり、仕様に準拠するブラウザおよび HTML パーサーで解析できます。

Vue にはコンポーネント テンプレートを定義するためのオプションが多数あります。少なくとも 7 つの異なる方法があるように思えます:

  • String

  • Template Literal

  • X テンプレート

  • インライン

  • レンダリング関数

  • JSX

  • 単一ページ コンポーネント

この記事では、各アプローチの例を取り上げ、それぞれの長所と短所について説明し、特定の場合に何をすべきかを理解します。状況に応じてどの方法を使用するのが最適ですか。

1. 文字列

デフォルトでは、テンプレートは JS ファイル内の文字列として定義されます。文字列内のテンプレートは理解するのが非常に難しいということに誰もが同意すると思います。この方法には、広範なブラウザーのサポート以外に特別な点はありません。 

Vue.component('my-checkbox', {
	template: `<div class="checkbox-wrapper" @click="check">
	<div :class="{ checkbox: true, checked: checked }">
	</div><div class="title">{{ title }}</div></div>`,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

2. テンプレート リテラル

ES6 テンプレート リテラル (「バックティック」) を使用すると、複数行にわたってテンプレートを定義できます。これは通常の JavaScript 文字列では実行できません。安全のために ES5 に変換する必要があるかもしれませんが、多くの新しいブラウザーがこれらのコマンドをサポートし、読みやすくなりました。

ただし、このアプローチは完璧ではありません。ほとんどの IDE では、構文の強調表示、タブ、改行などで依然として面倒なことがわかりました。 

Vue.component(&#39;my-checkbox&#39;, {
    template: ` < div class = "checkbox-wrapper"@click = "check" > 
    <div: class = "{ checkbox: true, checked: checked }" ></div>
							<div class="title">{{ title }}</div ></div>`,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});/

3.スクリプト タグはテキスト /x-template でタグ付けされ、コンポーネント定義内の ID によって参照されます。 私はこのアプローチが気に入っています。正しい HTML マークアップを使用して HTML を作成できるのですが、欠点は、テンプレートがコンポーネント定義の残りの部分から分離されてしまうことです。 

Vue.component(&#39;my-checkbox&#39;, {
	template: &#39;#checkbox-template&#39;,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});
<script type="text/x-template" id="checkbox-template">
	<div class="checkbox-wrapper" @click="check">
		<div :class="{ checkbox: true, checked: checked }"></div>
		<div class="title">{{ title }}</div>
	</div>
</script>

4. インライン テンプレート

inline-template 属性をコンポーネントに追加することで、次のことを示すことができます。内部コンテンツを分散コンテンツとして考えるのではなく、そのテンプレートであると考えます。


x-template と同じ欠点がありますが、利点の 1 つは、HTML 内でコンテンツが正しく配置されることです。テンプレートなので、JavaScript が実行されるまで待つのではなく、ページの読み込み時にレンダリングできます。

#

Vue.component(&#39;my-checkbox&#39;, {
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});
<my-checkbox inline-template>
	<div class="checkbox-wrapper" @click="check">
		<div :class="{ checkbox: true, checked: checked }"></div>
		<div class="title">{{ title }}</div>
	</div>
</my-checkbox>
5. レンダリング機能

##レンダリング機能の要件テンプレートを Javascript オブジェクトとして定義します。これらは明らかに、テンプレート オプションの中で最も冗長で抽象的なものです。

ただし、この利点は、テンプレートがコンパイラに近く、ディレクティブによって提供されるサブセットではなく完全な Javascript 機能にアクセスできることです。 

Vue.component(&#39;my-checkbox&#39;, {
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	},
	render(createElement) {
		return createElement(
			&#39;div&#39;,
		  	{
					attrs: {
						&#39;class&#39;: &#39;checkbox-wrapper&#39;
					},
					on: {
						click: this.check
					}
		  	},
		  	[
		    	createElement(
	      		&#39;div&#39;,
	      		{
	        		&#39;class&#39;: {
	        			checkbox: true,
	        			checked: this.checked
        			}
	      		}
		    	),
		    	createElement(
	      		&#39;div&#39;,
	      		{
	        		attrs: {
	          		&#39;class&#39;: &#39;title&#39;
	        		}
	      		},
	      		[ this.title ]
		    	)
		  	]
		);
	}
});
6. JSX

Vue で最も物議を醸しているテンプレート オプションは JSX です。一部の開発者は、JSX は醜く、直感的でなく、Vue の精神への裏切りであると考えています。 JSX ではブラウザが読み取れないため、最初に変換する必要があります。ただし、レンダリング関数を使用する必要がある場合は、JSX の方が抽象度が低いテンプレート定義方法であることは確かです。 

Vue.component(&#39;my-checkbox&#39;, {
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	},
	render() {
		return <div class="checkbox-wrapper" onClick={ this.check }>
		         <div class={{ checkbox: true, checked: this.checked }}></div>
		         <div class="title">{ this.title }</div>
		       </div>
	}
});

7. 単一ファイル コンポーネント

セットアップでビルド ツールを使い慣れている限り、単一ファイル コンポーネントが最も重要です。テンプレート オプションの 。これらは両方の長所をもたらし、すべてのコンポーネント定義を 1 つのファイルに保持しながらマークアップを作成できます。 これらは転置を必要とし、一部の IDE はこのファイル タイプの構文強調表示をサポートしていませんが、それ以外の場合はこれらを克服するのは困難です。 

<template>
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return { checked: false, title: &#39;Check me&#39; }
    },
    methods: {
      check() { this.checked = !this.checked; }
    }
  }
</script>
Pug と SFC のようなテンプレート プリプロセッサを使用できるため、より多くのテンプレート定義の可能性があると主張するかもしれません!

どちらが最適ですか?

もちろん、完璧な方法はありません。それぞれの方法はユースケースに基づいて判断する必要があります。最高の開発者はすべての可能性を認識し、各開発者を Vue.js ツール ベルトのツールにしていると思います。

英語の元のアドレス: https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

関連する推奨事項:

2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)


vue チュートリアルの推奨事項: 最新の 5 つの vue.js ビデオ チュートリアル2020 年厳選

プログラミング関連の知識については、

プログラミング入門をご覧ください。 ！

以上がVue.js でコンポーネント テンプレートを定義するいくつかの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript 分布式 vue.js html es6 字符串 JS 对象 字符串模板 dom ide https
声明：
この記事はvuejsdevelopers.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：vueプロジェクトでEslint検証をオフにする方法の紹介次の記事：vueプロジェクトでEslint検証をオフにする方法の紹介

関連記事

続きを見る