L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Vue pour les développeurs jQuery
Dans cet article, vous allez apprendre les composants fondamentaux de Vue.js pour les développeurs déjà familiarisés avec jQuery. Démarrez plus vite avec cette introduction à Vue.
Vue.js, un framework pour la construction d’applications Web, dispose d’un système de réactivité qui vous permet de modéliser et de gérer l’état de votre application de sorte que, lorsque les données sont modifiées, elles soient reflétées dans vous devez interroger le DOM. Ce système de réactivité simplifie la gestion de l'état. Avec tout le buzz autour des frameworks JS, vous avez peut-être entendu parler de Vue et souhaitez commencer à utiliser Vue en tant que développeur familiarisé avec jQuery. Peut-être que vous continuez simplement à voir des choses à propos de Vue apparaître dans vos newsletters préférées, et vous vous demandez comment vous pouvez faire la transition.
Dans cet article, je vais vous montrer quelques éléments fondamentaux de Vue que vous devez savoir pour obtenir ce changement. a commencé en tant que développeur jQuery.
Ajout de Vue.js à votre application
La première chose à faire est d’ajouter une référence à Vue.js dans votre projet. Vous pouvez le faire de différentes manières, mais je vais me concentrer sur l’utilisation d’une référence de script. Vous pouvez ajouter le code suivant à votre page pour référencer la bibliothèque Vue:
Une fois ajouté, vous devez initialiser Vue. Créez un fichier HTML avec le contenu suivant:
La fonction Vue reçoit un objet d'options qui indique à Vue comment configurer l'application lors de l'initialisation. La propriété el lui indique l'élément DOM que Vue sélectionnera et définira comme son territoire. Tout ce qui est dans cet élément sera contrôlé par Vue.
Affichage des données
Dans chaque application, nous devons afficher des données. En jQuery, c’est fait en appelant $ (élément) .text (données) ou $ (élément) .html (données) . Avec cela, nous devons savoir identifier l’élément DOM. Dans Vue, cela peut être réalisé en utilisant une interpolation de texte. Voici comment procéder dans Vue:
{{message}}
Nous avons ajouté ici une nouvelle propriété lors de l'initialisation de Vue. L’objet data est ajouté au système de réactivité de Vue, liant les données et le DOM. Comme mentionné précédemment, le système de réactivité de Vue est l’une de ses caractéristiques les plus distinctes. Il rend la gestion d’état simple et intuitive. Avec ce système de réactivité, chaque changement d'état est automatiquement répercuté sur la page. Donc, si vous mettez à jour la valeur du message il sera automatiquement reflété dans la page. Ajoutez le code suivant à votre script:
setTimeout (() => (app.message = "Hello Vue devs"), 3000);
Nous souhaitons parfois afficher une liste d'éléments, par exemple dans un
-
{{person.name}} a {{person.age}} yrs old.
const app = new Vue ({
el: "#app",
Les données: {
personnes: [
{ name: "Alice Wonderland", age: 25 },
{ name: "Will Smith", age: 29 }
]
}
});
L'attribut v-pour que nous avons utilisé est une directive Vue. Vue a beaucoup d'autres directives et elles commencent toutes par v- ; celui-ci applique le comportement réactif de Vue au DOM, le modifiant ainsi que les données.
Gestion des événements
Un autre aspect courant des applications Web est la gestion des événements lorsque les utilisateurs interagissent avec votre application. La directive v-on est utilisée pour attacher des écouteurs d'événements dans Vue. Vous trouverez ci-dessous un exemple de code qui écoute lorsqu'un bouton est cliqué et affiche une boîte d'alerte:
const app = new Vue ({
el: "#app",
méthodes: {
alerte: fonction () {
alert ("Hello World");
}
}
}); Le v-on: clic indique à Vue que nous souhaitons écouter l'événement click de ce bouton, avec alert comme gestionnaire d'événement. Les fonctions que Vue doit connaître sont contenues dans la propriété methods de l'objet options transmis à la fonction Vue lors de l'initialisation. Vous pouvez appeler la fonction avec des paramètres lorsque vous la connectez.
const app = new Vue ({
el: "#app",
méthodes: {
alerte: fonction (msg) {
alert (`Bonjour $ {msg}`);
}
}
La directive v-on a un raccourci, qui est @ . Ainsi, si vous devez réécrire le fragment qui a associé un gestionnaire d’événements click au bouton, ce sera:
Traitement des formulaires
Les formulaires permettent de collecter des informations auprès des utilisateurs. Il peut contenir une zone de texte, une case à cocher et des boutons radio. Vue fournit la directive v-model qui crée une liaison de données bidirectionnelle entre l'état de l'application et les éléments de formulaire. Voyons un exemple:
Nom: {{name}}
Pays: {{country}}
const app = new Vue ({
el: "#app",
Les données: {
prénom: "",
pays: ""
}
});
Vous pouvez voir avec moins de code et aucune manipulation DOM directe que vous pouvez obtenir la saisie de l’utilisateur et l’afficher également dans un paragraphe séparé. Avec cela, il est plus facile de collecter des données et de les publier sur un serveur pour le stockage. Prenons un exemple:
const app = new Vue ({
el: "#app",
Les données: {
prénom: "",
pays: ""
},
méthode: {
submitData: function () {
fetch ("https://httpbin.org/post", {
méthode: "POST",
body: JSON.stringify ({name: this.name, pays: this.country})
});
}
}
Pour collecter les données, nous écoutons l’événement submit du formulaire à l’aide de @ submit.prevent . Le .prevent est un modificateur d'événement, qui dans ce cas est un raccourci pour l'appel de event.preventDefault () dans la fonction de gestionnaire d'événements. Ensuite, pour publier des données, vous pouvez utiliser Fetch API ou une autre bibliothèque HTTP (par exemple, axios ) pour publier les données sur un serveur.
Cacher et montrer des choses [19659005] Une autre caractéristique commune est de masquer et d’afficher des éléments basés sur une valeur d’état booléen. Cela peut masquer certaines parties de la page en fonction du rôle de l'utilisateur ou basculer l'affichage d'une section de la page en cliquant sur un bouton. Dans Vue, vous pouvez y parvenir avec les directives v-if et v-show . Voyons un exemple:
S'il vous plaît, appelez-moi uniquement lorsque j'en aurai besoin!
const app = new Vue ({
el: "#app",
Les données: {
spectacle: vrai
}
});
Avec le code ci-dessus, le contenu de la balise
show est vrai. Ceci peut également être réalisé avec v-show mais il existe une légère différence entre les deux. Avec v-if l'élément sera complètement démonté alors que v-show ne le sera pas; il active plutôt la propriété CSS display de cet élément. Le v-if est accompagné de v-else et v-else-if et vous en saurez plus sur ici . [19659061] Vous avez peut-être déjà remarqué comment avec Vue, vous mettez à jour ce que vos utilisateurs voient sans interroger le DOM. Toutes les manipulations DOM sont gérées par Vue, vous écrivez moins de code et votre application est également plus facile à raisonner. Bien sûr, il y a beaucoup plus à voir dans Vue que celui-ci: il possède sa propre CLI pour échafauder rapidement de nouveaux projets, Vue router pour la gestion du routage dans les applications à une seule page, ainsi qu'un beaucoup plus API .Pour plus d'informations sur Vue : Vous souhaitez en savoir plus sur la création d'excellentes interfaces utilisateur avec Vue? Découvrez Kendo UI pour Vue notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il contient tous les composants dont vous aurez besoin, des grilles et graphiques aux programmateurs et aux cadrans.
Vous pourriez également être intéressé par ce contenu connexe:
Les commentaires sont désactivés en mode Aperçu.
Source link