Vue で文字列テンプレートを使用する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-29 10:19:44

オリジナル

2662 人が閲覧しました

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

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

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

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

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

2. 小道具

(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 を使用する必要があります。コンポーネント名>。

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

ログイン後にコピー

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

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

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

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

推奨書籍:

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

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

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