Des cadres frontaux comme AngularJS peuvent nous rendre très pratique pour nous développer de puissantes applications à une page. Cependant, parfois les grands cadres comme Angular sont trop grands pour nos projets et de nombreuses fonctions peuvent ne pas être utilisées. Pour le moment, nous devons évaluer la nécessité de l'utiliser. Si nous n'avons qu'à ajouter quelques fonctions à une simple page Web, l'utilisation d'Angular sera trop gênante, et l'installation, la configuration, la rédaction du routage, la conception des contrôleurs, etc.
Pour le moment, nous avons besoin d'une solution plus légère. Vue.js est un bon choix. Vue.js est un cadre qui se concentre sur les modèles de vue (ViewModal). Le modèle de vue est un pont pour la communication de données entre l'interface utilisateur et le modèle de données, réalisant la liaison bidirectionnelle des données entre l'interface utilisateur et le modèle de données. Ce n'est pas un "cadre complet", mais un cadre simple et flexible axé sur les calques de vue.
Ensuite, nous utiliserons une application de mémo simple pour en savoir plus sur les bases de Vue.js. Afin de faire en sorte que tout le monde accorde plus d'attention à Vue.js lui-même, nous avons conçu une application client basée sur des données locales. À la fin de cet article, nous mentionnerons l'interaction entre Vue.js et le backend.
Préparation
Allons d'abord Vue.js et bootstrap via NPM (pas nécessaire, voici pour appliquer sa bibliothèque de style) et entrez ce qui suit dans la ligne de commande:
NPM Installer Vue Bootstrap
Créez ensuite deux fichiers:
Touch index.html app.js
Ajoutez également le contenu suivant à index.html
<! - index.html -> <! doctype html> <html> <ead> <meta charset = "utf-8"> <tight> vue </ title> <! - CSS -> <link rel = "Stylesheet" href = "node_modules / bootstrap / dist / css / bootstrap.min.min.min.CSS"> </ hard> <! - <!! Bar de navigation -> <Anav> <div> <a> <i> </i> Vue Memo </a> </div> </AV> <! - Parties principales de l'application -> <div id = "Events"> <! - Ajoutez un formulaire -> <div> <v> <h3> Ajoutez un événement </h3> </v> <v> </v> </v> </v> <! <div> </ div> </ div> </ div> <! - Js -> <script src = "node_modules / vue / dist / vue.js"> </ script> <script src = "app.js"> </ script> </ body> </html>
La balise <v> avec des "événements" ID est la partie principale de cette application. Après cela, nous créerons une instance Vue pour cette partie centrale.
Créer une instance Vue
Tout d'abord, créons une instance Vue et définissons l'attribut "el" de cette instance à "#Events". De cette façon, l'instance sera liée à un conteneur avec les "événements" d'ID.
// app.jsnew vue ({// et la liaison du conteneur el avec id "Events": '#events'});À ce stade, la fonction de Vue prendra effet dans les événements Div #. Avant d'ajouter un autre contenu, ajoutons quelques propriétés nécessaires à l'instance Vue créée:
// app.js new vue ({// le conteneur liant El avec l'ID des "événements": '#events', // Dans l'attribut de données, nous définissons les données qui interagissent avec les données de la page Web: {}, // Lorsque l'application est chargée, la fonction dans l'attribut Ready {}});L'attribut de données est un objet qui déclare toutes les données dans le modèle de vue de notre application.
L'attribut prêt est une fonction qui sera exécutée lorsque l'application sera chargée. Habituellement, d'autres méthodes sont appelées ici pour initialiser les données requises par l'application.
La méthode des méthodes définit les méthodes qui doivent être utilisées dans cette application
Ajouter du contenu à la forme
Nous devons saisir les détails de la note sous le formulaire. Nous avons utilisé le sélecteur de temps natif de HTML5 pour définir l'heure du contenu de la note. (Notez que cette fonction n'est pas applicable dans le navigateur Firefox, il est recommandé d'utiliser Chrome ou Safari)
<div> <entrée placeholder = "Nom de l'événement" V-model = "event.name"> </ div> <div> <textArea placeholder = "event description" V-model = "event.description"> </ textarea> </ div> <div> <entrée type = "date" placeholder = "date" v-model = "event.date"> </v> <a div> < @ click = "AddEvent"> soumettre </fontificateur> </div>
Nous avons ajouté une directive "V-model" à la balise d'entrée et à la balise TextArea. Semblable au «modèle Ng» d'Angular, la valeur de ce modèle V spécifie les données liées à cette balise dans le modèle de vue. Ces données sont non seulement disponibles ici, mais aussi ailleurs dans le conteneur.
Nous avons ajouté une instruction "@Click" au bouton Soumettre. Cette instruction est abrégée et le nom complet doit être "V-on: cliquez". Sa fonction est de lier un écouteur pour cliquer sur les événements à ce bouton. Lorsque l'événement de clic est déclenché, la fonction d'écoute dans l'instruction @click sera exécutée. Dans cet exemple, nous lions la fonction AddEvent au bouton Soumettre. Nous pouvons également lier d'autres événements, et la règle d'écriture est @Event name = "Fonction d'écoute". Si nous voulons lier une fonction d'écoute F à l'événement Keydown, nous pouvons écrire ceci: @ keydown = "f" ou v-on: keydown = "f"
À ce stade, si vous prévisualisez la page Web, vous verrez le contenu suivant:
Ajouter des données
Nous avons déjà mentionné la méthode Addevent, qui est utilisée pour ajouter de nouvelles données de mémo.
Nous allons maintenant définir cette méthode et ajouter quelques données nécessaires
// app.js ... data: {event: {name: '', description: '', date: ''}, événements: []}, // La fonction dans l'attribut prêt sera exécutée, nous devons être chargés de l'initialisation des données this.fetchents ();}, // les méthodes que nous utilisons dans les méthodes de méthodes: Définir une méthode pour obtenir des données fetchvents: function () {var events = [{id: 1, nom: 'avoir une réunion', description: '9 h dans la salle de conférence du 21e étage', date: '2015-09-10'}, {id: 2, nom: 'shopping', description: '2015-09-10', Date: '2015-10-02'}, {id: 3, name: 'apprend' 2015-10-02 '}, {id: 3, name:' Learne Vue ', Date:' 2016-03-11 '}]; // $ set est une méthode fournie par Vue pour insérer des données dans un tableau. La vue sera actualisée lors de l'exécution de ce. $ Set («événements», événements); }, // insérer des données dans un tableau d'événements AddEvent: function () {if (this.event.name) {this.events.push (this.event); this.event = {nom: '', description: '', date: ''}; }}}Dans la propriété Data, nous définissons un objet d'événement et un tableau d'événements, représentant respectivement les événements et le tableau d'événements. Ces données seront chargées lorsque l'application sera chargée. Si nous ne prédisons pas les objets d'événement, bien que les fonctions suivantes puissent être implémentées, le navigateur rapportera cette erreur:
Ils signifient que si les données que vous utilisez dans votre application ne sont pas déclarées dans l'attribut de données, les performances de l'application seront affectées. Par conséquent, les données que nous utilisons dans notre application sont mieux déclarées dans l'attribut de données.
Dans la propriété Ready, nous définissons la méthode Fetchvents pour obtenir des données. Dans cette méthode, nous ajoutons des données à la vue via la méthode VM. $ SET. Sa fonction est similaire à la méthode push d'un tableau, et il rafraîchit également la vue. Le paramètre de cette méthode doit être un traject de touche de chaîne, représentant les données entrantes. Pour une utilisation spécifique, veuillez vous référer à ici.
Enfin, dans la propriété Méthode, nous définissons la méthode AddEvents pour vérifier si la valeur de l'événement. Le nom existe, et si oui, ajoutez l'événement au tableau d'événements. Après cela, les données de l'objet de l'événement seront effacées et le formulaire sera également effacé.
Ajouter une liste d'éléments
Nous utilisons une liste de choses pour énumérer toutes les choses:
<div> <a href = "#" v-for = "Event in Events"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {{event.date}} </h5> <p ve-if = "event.Description"> {} </h5> <p V-if = "Event.Description"> {} <description }} </p> <Button @ click = "Deleteevent ($ index)"> supprimer </ftones> </a> </div>Nous utilisons la directive V-FOR pour combler les éléments de rendu avec la même structure DOM et le contenu d'affichage différent. Dans cet exemple, nous ajoutons une directive V-FOR à une balise, qui traversera les données dans le tableau d'événements, et nous représentons chaque données de traversée avec l'événement. Les éléments avec la directive V-FOR ajoutés appliqueront les résultats de chaque traversée dans les éléments enfants et les afficheront à plusieurs reprises. Les amis qui ont utilisé le moteur, la réaction ou l'angulaire peuvent être plus familiers avec une utilisation similaire. Dans notre exemple, le contenu des balises H4, H5, P et Button sera affiché à plusieurs reprises, et le nombre de boucles est la longueur du tableau des événements. Les enfants avec des éléments directifs V-FOR sont appelés modèles, et les données du modèle sont enveloppées en double accolade. Dans cet exemple, les données sont les différentes propriétés de l'objet de l'événement (nom, date et description).
Vous remarquerez que certains des éléments du modèle ont ajouté des directives V-IF. Cette instruction agit comme un rendu conditionnel. La valeur de V-if est une condition de jugement. Si le résultat est vrai, l'élément sera rendu, sinon il ne sera pas rendu. De plus, nous avons ajouté une instruction de clic à l'élément du bouton et appelé la méthode Deleteevent pour supprimer la question (la définition spécifique sera donnée ci-dessous). L'indice de paramètre $ représente le nombre de l'élément actuellement traversé dans le tableau.
Actualiser la page et nous constaterons que tous les éléments seront répertoriés sur le côté droit de la page. Après avoir entré le contenu dans le formulaire à gauche et cliqué sur le bouton "Soumettre", les nouveaux éléments seront automatiquement ajoutés à la liste à droite.
Définissons la méthode DeleteeEvent
Deleteevent: function (index) {if (confirm ("Êtes-vous sûr de supprimer cet événement?")) {// $ supprime est une méthode de commodité Vue similaire à Splice this.events. $ supprime (index); }}Dans cette méthode, nous demandons d'abord à l'utilisateur s'il est sûr de supprimer l'élément. Si vous cliquez sur "OK", l'élément sera supprimé du DOM via la méthode prédéfinie de Vue.
Interaction avec le backend
Comme Angular, le front-end et le back-end de Vue sont séparés, et l'interaction avec le back-end est terminée via les demandes HTTP. Il existe de nombreux outils interactifs, vous pouvez utiliser l'objet familier $ .ajax, l'objet XMLHTTPRequest natif ou d'autres bibliothèques tierces, ou essayer Vue-Resource.
Voici une brève introduction à Vue-Resource. Vue-Resource est un plug-in conçu spécifiquement pour VUE pour envoyer des demandes HTTP. Il prend en charge les modèles Promise et URI, et fournit également des outils comme Interceptor. Voyons notre exemple ci-dessus. Nous modifions l'acquisition de questions pour les obtenir du serveur. À l'heure actuelle, nous devons modifier la méthode FetchEvents: (Supposons que le backend fournit des services liés aux questions via l'URL de l'API / les événements, la même ci-dessous)
fetchEvents: function () {this. $ http.get ('api / events'). puis (fonction (événements) {this. $ set ('Events', events);}). Catch (function (error) {console.log (error);});}Si l'acquisition est réussie, l'instruction de la fonction alors sera exécutée et la méthode $ SET est toujours appelée, mais les événements de paramètre d'entrée sont récupérés du serveur.
Si nous modifions l'AddEvent, nous devons envoyer une demande de poste:
addEvent: function () {this. $ http.post ('api / events', this.event) .then (function (réponse) {this.events.push (this.event); console.log ("événement ajouté!");}) .catch (function (error) {console.log (error);});}De même, la méthode de suppression des questions peut être modifiée comme suit:
Deleteevent: function (index) {this. $ http.delete ('api / events /' + event.id) .then (function (réponse) {this.events. $ disoveIci, nous transmettons l'ID de l'affaire au serveur pour dire au serveur de supprimer l'ID de l'affaire pour faciliter le serveur pour déterminer la question à supprimer.
Conclusion
Les amis qui ont utilisé Angular et React trouvera que Vue et ils sont tous similaires: des instructions similaires au traitement modulaire angulaire similaire à React. Cependant, Vue est évidemment différente d'eux. Il est plus léger et facile à utiliser. Vous n'avez pas besoin de créer des configurations compliquées comme Angular, et vous n'avez pas besoin d'apprendre de nouveaux concepts tels que le nouveau Dom virtuel, JSX, etc. Comme React. Par conséquent, si votre application n'est pas très importante, vous pourriez tout aussi bien envisager d'utiliser VUE comme cadre d'application.
Ce qui précède est le tutoriel d'introduction rapide pour Vue.js présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!