Spécification pour l'écriture de composants vue

Cette fois, je vous apporte la spécification d'écriture du composant Vue. Quelles sont les précautions pour la spécification d'écriture du composant Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Données Pilote et la composantisation sont les deux fonctionnalités les plus importantes de vue.js. La composantisation vise à faciliter la réutilisation du code et à améliorer l'efficacité du développement. Il existe quatre manières courantes d'écrire des composants Vue, chacune avec ses propres caractéristiques et adaptée à différents scénarios.

1. Structure du composant global

 :

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

définie via Vue.component() dans la balise de script. Un composant global et applique le composant à la balise avec l'application id dans le fichier html via la nouvelle instance Vue().

Fonctionnalités :

<1> peut être directement défini et utilisé dans la balise de script du fichier html

<2> Les composants définis par cette méthode sont des composants globaux et peuvent être utilisés dans n'importe quelle instance de Vue. Ils conviennent à des scénarios de projet relativement simples

<3> 🎜> Vue.component(), et les noms des composants ne peuvent pas être les mêmes ;

instance :

Composant de bienvenue

2. Composants locaux

Structure :

Définir un objet composant dans la balise de script et enregistrer le composant via l'attribut composants dans l'appel de l'instance Vue.

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

Caractéristiques :

<1> Semblables aux composants définis globalement, les composants peuvent être écrits et utilisés directement dans la balise de script du fichier html ; 🎜><2> Ce composant ne peut être utilisé que dans une instance Vue enregistrée

Instance :

Composant de bienvenue

3. Utilisez la balise template

Structure :

Utilisez la balise template pour écrire la structure html dans le composant à l'intérieur de la balise body, dans Register et utilisez des composants globaux et des composants locaux dans les balises de script. La différence est que l'attribut template du composant est référencé par id.

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

Caractéristiques :

<1> Le fichier js ne contient pas de contenu de structure HTML, ce qui permet de séparer la structure et la logique

Exemple :

Composant de bienvenue

4. Composant à fichier unique

Structure :

Créez un fichier avec le suffixe vue et le nom du fichier est le nom du composant. Le composant contient trois parties : la structure html, la logique js et le style css, qui correspondent à différentes balises. Lorsque vous utilisez des composants, vous pouvez les utiliser en les important.

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

Caractéristiques :

<1> Les composants ne s'affectent pas les uns les autres et ont une grande réutilisabilité, et leur code HTML, CSS et JS peuvent tous être réutilisés ; ><2> La structure et la logique des composants sont claires

<3> Convient aux projets de grande envergure et complexes, adaptés au développement de plusieurs personnes ; >Exemple :

Composant de bienvenue

 ! ! ! Il convient de noter que : toutes les balises de la balise modèle doivent être enveloppées dans une seule balise, sinon une erreur sera signalée.

Manière d'écriture correcte :

Manière d'écriture incorrecte :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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

Explication détaillée de l'utilisation de vuex

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

Quelles sont les méthodes pour faire fonctionner l'exécution du rendu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!