Vue で文字列テンプレートを使用する方法

今回は、Vue で string テンプレートを使用する方法と、Vue で string テンプレートを使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

1. HTML テンプレートと文字列テンプレート

HTML テンプレート: HTML ページに直接マウントされるテンプレート。 (つまり、非文字列テンプレート)

非文字列テンプレート: 単一のファイル内で で指定されたテンプレート、つまり、html で記述されたテンプレートは非文字列テンプレートです。

文字列テンプレート: js文字列で定義されたテンプレート。

2. 小道具

属性: HTML 属性は大文字と小文字を区別しません。したがって、文字列テンプレート以外のテンプレートを使用する場合、キャメルケース (キャメルケースの名前付け) の props 属性を、対応するケバブケース (ダッシュ区切りの名前付け) に変換する必要があります:

(1)、HTML テンプレート:

Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

(2)、文字列テンプレート:

<!-- 在 HTML 中使用kebab-case -->
<child my-message="hello!"></child>

3. コンポーネント名のケース:

注: (文字列テンプレートや単一ファイル コンポーネントではなく) DOM 内でコンポーネントを直接使用する場合は、W3C の自己規定に従うことを強くお勧めします。仕様内で定義されたコンポーネント

名 (すべての小文字にはハイフンが含まれている必要があります)。これは、現在および将来の HTML 要素との競合を回避するのに役立ちます。 (1)、kebab-case:

Vue.component('my-component-name', { /* ... */ });

を使用します

kebab-case (ダッシュ区切りの名前) を使用してコンポーネントを定義する場合、< ;my- などのこのカスタム要素を

参照する場合にも kebab-case を使用する必要があります。コンポーネント名>。

(2)、PascalCase を使用します:

Vue.component('MyComponentName', { /* ... */ })

PascalCase (キャメルケース命名) を使用してコンポーネントを定義する場合、このカスタム要素を参照するときに両方の命名方法を使用できます。つまり、 と は両方とも受け入れられます。ただし、vue.js の

などの非文字列テンプレート) に直接導入されることに注意してください。 index.html を直接 CDN app">

) を使用する場合、ケバブケースのみが有効です。キャメルケースを使用するとレンダリングされません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

ES6 テンプレート文字列の使用方法

フォームを使用して入力ボックス データを取得する WeChat アプレットを実装する方法

以上がVue で文字列テンプレートを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。