Je suis développeur full-stack chez Syncrasy Tech (société de solutions informatiques) . J'adore écrire des codes React. Mais pourquoi je vous le dis car nous sommes ici pour discuter des meilleures pratiques Vue.js pour le développement web. Je vous le dis pour que vous puissiez comprendre mon parcours et pourquoi je parle ici de Vue.js.
J'adore travailler sur les codes React, mais je déteste les lire. C'est la raison pour laquelle je n'arrive pas à coder. Même avec les meilleures pratiques de révision de code, je ne peux pas comprendre l'imbrication des composants React qui aide simplement à créer des structures d'interface utilisateur plus complexes dans les applications Web.
La solution à ce problème est Vue, qui n'est plus si nouvelle dans le bloc de développement d'applications Web. J'ai beaucoup entendu parler des composants asynchrones de Vue, du rendu côté serveur, des outils et des bibliothèques. Vous trouvez peut-être que cette myriade de termes prête à confusion. Croyez-moi, vous n'êtes pas le seul, de nombreux développeurs de tous niveaux ressentent la même chose lorsqu'ils ne connaissent pas les meilleures pratiques de Vue.
Quelques jours plus tard, j'ai finalement décidé d'y mettre mes codes. Ce que je partage ici sont les nombreuses meilleures pratiques que j'ai apprises grâce à mon expérience avec Vue. Je suis prêt à partager ce que je trouverais.
Commençons
Essayez de tout apprendre à la fois sur Vue peut être écrasant. Commençons par les chiffres. Aujourd'hui, Vue a 147K étoiles de Github laissant derrière lui les géants JS comme Angular (50.6k étoiles) et React (135k étoiles).
J'ai divisé les meilleures pratiques de Vue en quatre catégories:
Fonctionnalités de Vue
Les fonctionnalités de Vue ont beaucoup de choses à discuter automatiquement sous le capot. Vue.js est une plate-forme simple orientée vue qui est son premier avantage principal. Toutes les informations du codage ne sont valides que si elles interagissent correctement avec les vues nommées et imbriquées nommées.
La création d'une vue unique est assez simple dans Vue, il vous suffit de charger l'interface et d'ajouter du JavaScript pour démarrer le développement de votre application web.
let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } })
Ensuite, un peu de balisage pour obtenir la vue finale:
<div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div>
Que révèle le code ci-dessus?
L'exemple de codage ci-dessus montre comment Vue rend automatiquement les éléments sans utiliser de codes. Une syntaxe simple est utilisée pour envoyer les données à visualiser directement. L'ajout de propriétés d'instance peut être utilisé pour le rendu des éléments Vue.
Les systèmes Vue tels que JQuery conservent les informations dans DOM et pour toutes les modifications supplémentaires dont les développeurs ont besoin pour effectuer le rendu et la modification des parties associées. Passons aux autres parties des fonctionnalités de Vue.
Composants
Pour les applications Web, les développeurs de Vue peuvent utiliser des composants comme les autres bibliothèques en utilisant Vue.compoment. Un composant peut inclure un nom, une configuration ou un identifiant.
Vue.component('component-name', { /* options */ })
Les composants à fichier unique fonctionnent très bien pour les projets de développement Web de petite à moyenne taille. Il est assez facile d'utiliser les composants Vue dans un seul fichier et en raison des avantages de la logique JavaScript, du style CSS et du modèle de code HTML. Voir également un exemple:
<template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style>
Les composants de fichier unique Vue utilisent WebPack pour offrir la possibilité d'utiliser et d'appliquer des fonctionnalités Web modernes à votre application Web. Les codeurs peuvent spécifier un modèle construit à l'aide de Pug à l'aide de préprocesseurs:
TypeScript
SCSS
Sass
Moins
Postcss
Carlin
La fonction Vue v-bind permet aux composants d'accepter les données des composants parents (accessoires) qui peuvent être vues dans le tableau de chaînes:
props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
Cela documentera non seulement vos composants, mais vous avertira également lorsque vous passerez un mauvais type de code dans la console JavaScript du navigateur.
En bref, Vue offre une grande flexibilité aux développeurs d'applications Web qui convient à différentes stratégies de développement et facilite également l'interaction avec différentes bibliothèques Vue.
Événements et gestionnaires pour gérer les erreurs dans Vue
Vue JS est un framework JS progressif qui se concentre sur la couche de vue et un système de prise en charge des bibliothèques. Pour toutes les étapes du développement d'applications Web qui utilisent Vue, des événements sont créés sur les directives v-on et les deux-points qui sont utilisés pour identifier le type d'événement, tel que v-on click.
Un exemple simple de v-on peut être ceci:
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
Quelques exemples d'événements DOM HTML dans Vue:
au changement
au clic
en vol stationnaire
en charge
à la souris
au survol de la souris
en charge
Gestionnaires d'événements dans Vue JS
Les gestionnaires sont affectés au traitement des erreurs survenues dans les événements. Il permet à un développeur d'écrire le code lorsqu'un événement spécifié est déclenché.
Rendu conditionnel et boucles dans Vue
Le rendu conditionnel dans Vue signifie supprimer ou ajouter certains éléments du DOM si une valeur spécifiée est vraie. C'est le meilleur moyen pour la liaison de données conditionnelle qui permet aux développeurs de connecter des informations lorsqu'une condition particulière est vraie. Vous pouvez utiliser la directive v-if pour le rendu conditionnel.
Voir un exemple:
<template> <div> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script>
Vous pouvez utiliser v-else pour étendre la directive v-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Vous pouvez l'étendre davantage en utilisant le bloc v-else-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Si la valeur qu'un programmeur souhaite évaluer est vraie, exécutez le modèle v-if . Pour d'autres extensions, la directive v-else ou v-if-else est déclenchée.
Vue JS contient un protocole API simple qui permet de faire de la place pour la directive v-for qui rend une liste d'éléments dans le DOM.
Exemple:
<template> <ul> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script>
Dans le codage ci-dessus, une boucle parcourt le code sous la forme du tableau à l'aide v-for directive v-for . Le tableau fait référence aux objets qui permettent aux utilisateurs de voir les propriétés présentes à l'intérieur du tableau.
Sortie:
samuel queen rinha
Liaison de données bidirectionnelle pour accélérer le processus de développement
L'une des principales caractéristiques de Vue est sa liaison bidirectionnelle réactive qui maintient vos données, tableaux et variables synchronisés avec DOM sans vous obliger à faire quoi que ce soit d'autre. Vue utilise la directive v-model pour la liaison bidirectionnelle. La directive v-model lie l'élément d'entrée à la propriété name à l'aide de directives v-model qui mettent à jour le champ d'entrée et met également à jour le champ de propriété name qui lui est lié.
Comment ça marche?
<template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script>
La directive v-model est livrée avec l'option du modificateur .lazy qui met à jour la propriété de données après que l'événement de modification se soit produit.
Vous pouvez également utiliser la fonction .trim pour supprimer l'espace blanc de votre code.
L'option du modificateur .number est disponible si vous souhaitez accepter des nombres dans le champ de saisie.
Enfin, ce sont les principaux atouts de Vue.js que vous pouvez utiliser pour coder correctement vos applications Web. Donc, si vous démarrez un nouveau projet de développement Web, Vue.js est votre choix. Il mène le jeu avec ses fonctionnalités élégantes, ses directives de style, son codage facile et permet également d'économiser vos efforts.