Spezifikation zum Schreiben von Vue-Komponenten

Dieses Mal bringe ich Ihnen die Vorsichtsmaßnahmen für das Schreiben von Vue-Komponenten Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Daten-Treiber und Komponentisierung sind die beiden wichtigsten Funktionen von vue.js. Die Komponentisierung soll die Wiederverwendung von Code erleichtern und die Entwicklungseffizienz verbessern. Es gibt vier gängige Methoden zum Schreiben von Vue-Komponenten, jede mit ihren eigenen Eigenschaften und für unterschiedliche Szenarien geeignet.

1. Globale Komponente

Struktur:

// 组件的注册 
Vue.component( 'componentName', { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
// 组件的使用 
new Vue({ 
 el: '#app' 
})

Definieren Sie eine globale Komponente über Vue.component() im Skript Tag-Komponente und wenden Sie die Komponente über die neue Vue()-Instanz auf das Tag mit der ID app in der HTML-Datei an.

Funktionen:

<1> kann direkt im Skript-Tag in der HTML-Datei definiert und verwendet werden; Die durch diese Methode definierten Komponenten sind globale Komponenten und können in jeder Vue-Instanz verwendet werden. Sie eignen sich für relativ einfache Projektszenarien

<3> Sie müssen jedes Mal wiederverwendet werden

eine Komponente definieren

Vue.component() und die Komponentennamen dürfen nicht identisch sein;

Instanz:

Willkommenskomponente

2. Lokale Komponenten

Struktur:

// 构造组件对象 
const componentName = { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
// 组件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

Definieren Sie ein Komponentenobjekt im Skript-Tag und registrieren Sie die Komponente über das Komponentenattribut im Vue-Instanz.

Funktionen:

<1> Ähnlich wie global definierte Komponenten können Komponenten direkt im Skript-Tag in der HTML-Datei geschrieben und verwendet werden; 🎜><2> Diese Komponente kann nur in einer registrierten Vue-Instanz verwendet werden

Instanz:

Willkommenskomponente

3. Verwenden Sie das Template-Tag

Struktur:

<template id="componnet"> 
 // 组件的html结构 
</template> 
// 全局组件的注册与使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部组件的注册与使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

Verwenden Sie das Template-Tag, um die HTML-Struktur in die Komponente innerhalb des Body-Tags und in das Skript-Tag zu schreiben Es wird in Form globaler Komponenten und lokaler Komponenten registriert und verwendet. Der Unterschied besteht darin, dass das Vorlagenattribut in der Komponente durch die ID referenziert wird.

Funktionen:

<1> Die js-Datei enthält keinen HTML-Strukturinhalt, wodurch eine Trennung von Struktur und Logik erreicht wird Beispiel:

Willkommenskomponente

4. Einzeldateikomponente

Struktur:

<template lang="html"> 
 // 组件中的html结构 
</template> 
<script> 
 //组件的逻辑 
 export default { 
 // 组件的属性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 组件的样式 
</style>

Eine Datei mit dem Suffix vue erstellt, der Dateiname ist der Komponentenname. Die Komponente enthält drei Teile: HTML-Struktur, JS-Logik und CSS-Stil, die verschiedenen Tags entsprechen. Wenn Sie Komponenten verwenden, können Sie diese durch Importieren verwenden. Funktionen:

<1> Komponenten beeinflussen sich nicht gegenseitig und sind hoch wiederverwendbar, und ihre HTML-, CSS- und JS-Dateien können alle wiederverwendet werden >

<2> Die Struktur und Logik der Komponenten ist klar

<3> Geeignet für die Entwicklung durch mehrere Personen; >Beispiel:

Willkommenskomponente

! ! ! Dabei ist zu beachten: Das Template-Tag muss alle Tags mit einem Tag umschließen, sonst wird ein Fehler gemeldet

Korrekte Schreibweise:

<template> 
 <p> 
 <p></p> 
 ...... 
 <p></p> 
 </p> 
</template>

Falsche Schreibweise:

<template> 
 <p></p> 
 <p></p> 
 ...... 
 <p></p> 
</template>

Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Vuex

Welche Methoden gibt es für die Renderausführung?

Das obige ist der detaillierte Inhalt vonSpezifikation zum Schreiben von Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!