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', { /* ... */ });
verweisen Das Element verwendet die Groß-/Kleinschreibung, zum Beispiel
(2), verwenden Sie PascalCase:Vue.component('MyComponentName', { /* ... */ })
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-VorlagenzeichenfolgenSo 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!
