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

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

Willkommenskomponente

2. Lokale Komponenten

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

<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

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 
 } 
})

Nach dem Login kopieren

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.

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

4. Einzeldateikomponente

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

Nach dem Login kopieren

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:

<2> Die Struktur und Logik der Komponenten ist klar

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

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

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

Detaillierte Erklärung der Verwendung von Vuex

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!