So verwenden Sie String-Vorlagen in Vue

Dieses Mal zeige ich Ihnen, wie Sie die String-Vorlage in Vue verwenden. Hier sind praktische Fälle sehen. . 1. HTML-Vorlage und String-Vorlage

HTML-Vorlage: eine direkt auf der HTML-Seite montierte Vorlage. (d. h. Nicht-String-Vorlage)

Nicht-String-Vorlage: Die durch angegebene Vorlage ist mit anderen Worten die Nicht-String-Vorlage Vorlage. .

String-Vorlage: Vorlage definiert im JS-String.

2. Requisiten

Attribute

: Bei HTML-Attributen wird die Groß-/Kleinschreibung nicht beachtet. Daher muss bei Verwendung einer Nicht-String-Vorlage das props-Attribut von camelCase (Kamel-Case-Benennung) in das entsprechende Kebab-Case (durch Bindestriche getrennte Benennung) konvertiert werden: (1), HTML-Vorlage :

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

(2), String-Vorlage:

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

3. Groß-/Kleinschreibung des Komponentennamens:

Hinweis: Bei Verwendung einer Komponente direkt im DOM (nicht in String-Vorlage oder Einzel-) Dateikomponente), empfehlen wir dringend, die W3C-Spezifikation für benutzerdefinierte Komponentennamen zu befolgen (Buchstaben müssen ausschließlich in Kleinbuchstaben geschrieben sein und einen Bindestrich enthalten). Dies hilft Ihnen, Konflikte mit aktuellen und zukünftigen HTML-Elementen zu vermeiden.

(1), use kebab-case:

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

Wenn Sie kebab-case (durch Bindestriche getrennte Namen) zum Definieren einer Komponente verwenden, müssen Sie in

Dieser Brauch auch auf

verweisen Das Element verwendet die Groß-/Kleinschreibung, zum Beispiel .

(2), verwenden Sie PascalCase:

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

Wenn Sie PascalCase (Kamelbuchstaben-Benennung) zum Definieren einer Komponente verwenden, können Sie beide Benennungsmethoden verwenden, wenn Sie auf dieses benutzerdefinierte Element verweisen. Das bedeutet, dass beide akzeptabel sind. Beachten Sie jedoch, dass die

) ist nur Kebab-Case gültig. Wenn Sie Camel Case verwenden, wird es nicht gerendert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie ES6-Vorlagenzeichenfolgen

So implementieren Sie das WeChat-Applet mithilfe eines Formulars, um ein Eingabefeld zu erhalten Daten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie String-Vorlagen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!