Vue est une bibliothèque JavaScript petite et légère. Il a une API simple et facile à comprendre qui rend les développeurs plus faciles et plus pratiques lors du développement d'applications Web. En fait, ce qui a toujours rendu Vue fier, c'est sa commodité, son exécution et sa flexibilité.
Le but de ce tutoriel est d'utiliser quelques exemples pour vous donner un aperçu de certains concepts et fonctionnalités de base. Dans d'autres tutoriels, vous apprendrez des fonctionnalités plus utiles de Vue pour créer un projet évolutif avec Vue.
Liaison des données MVVM
L'essence de MVVM est de lier la vue et le modèle à travers la liaison des données, de sorte que les modifications de données sont automatiquement mappées pour afficher les mises à jour. Vue.js emprunte le mécanisme d'instructions d'Angular dans la conception de l'API de liaison des données: les utilisateurs peuvent implémenter la liaison des données via des attributs HTML avec des préfixes spéciaux, ou utiliser l'interpolation de modèle de pointe bouclée commune, ou utiliser la liaison bidirectionnelle sur les éléments de forme:
<! - Directive -> <span v-text = "msg"> </span> <! - Interpolation -> <span> {{msg}} </span> <! - Bidirectional Binding -> <input V-model = "msg">L'interpolation est essentiellement une instruction, juste pour faciliter l'écriture de modèles. Pendant la compilation du modèle, Vue.js créera un objet directif pour chaque nœud DOM qui nécessite une mise à jour dynamique. Chaque fois que les données observées par un objet d'instruction changent, elles effectueront des opérations DOM correspondantes sur le nœud cible lié. La liaison des données basée sur l'instruction permet aux opérations DOM spécifiques d'être raisonnablement encapsulées dans les définitions d'instructions. Le code commercial n'a qu'à impliquer des modèles et des opérations sur l'état de données, ce qui améliore considérablement l'efficacité du développement et la maintenabilité de l'application.
Contrairement à Angular, l'API de Vue.js n'a pas de concepts compliqués tels que le module, le contrôleur, la portée, l'usine, le service, etc., et tout est basé sur "Instance ViewModel":
<! - Template -> <div id = "app"> {{msg}} </ div> // L'objet natif est des données var data = {msg: 'Bonjour!'} // Créer une instance ViewModel var vm = new Vue ({// Sélectionnez l'élément cible El: '#App', // Fournir des données initiales Data: Data})Résultat de rendu:
<div id = "app"> Bonjour! </div>
Pendant le rendu, Vue.js a également terminé la liaison dynamique des données: si la valeur de Data.msg est modifiée, le DOM sera automatiquement mis à jour. N'est-ce pas très simple et facile à comprendre? De plus, Vue.js a également considérablement simplifié l'API des directives et filtres personnalisés. Si vous avez une expérience de développement angulaire, vous commencerez très rapidement.
Mise en œuvre de l'observation des données
Le principe de mise en œuvre de l'observation des données de Vue.js est essentiellement différent de celui d'Angular. Les lecteurs qui connaissent Angular peuvent savoir que les observations de données d'Angular utilisent des mécanismes de vérification sales. Chaque instruction aura un objet correspondant utilisé pour observer les données, appelée un observateur; Il y aura beaucoup d'observateurs dans une portée. Chaque fois que l'interface doit être mise à jour, Angular itérera à travers tous les observateurs de la portée actuelle, les évaluera un par un, puis les comparera avec les anciennes valeurs enregistrées auparavant. Si le résultat d'évaluation change, la mise à jour correspondante sera déclenchée. Ce processus est appelé cycle de digest. Il y a deux problèmes avec la vérification sale:
Tous les changements de données signifient que chaque observateur de la portée actuelle doit être réévalué, donc lorsque le nombre d'observateurs est énorme, les performances de l'application seront inévitablement affectées et il est difficile à optimiser.
Lorsque les données changent, le cadre ne peut pas détecter activement la survenue de changements. Il doit déclencher manuellement le cycle du digest pour déclencher la mise à jour DOM correspondante. Angular évite ce problème en déclenchant automatiquement la partie du cycle du digest dans la fonction du gestionnaire d'événements DOM, mais il existe encore de nombreuses situations qui nécessitent que l'utilisateur se déclenche manuellement.
Vue.js utilise un mécanisme d'observation basé sur la collecte de dépendances. En principe, c'est la même chose que l'ancien knock-out du cadre MVVM. Les principes de base de la collection de dépendances sont:
Transformez les données natives en "objets observables". Un objet observable peut être valorisé ou attribué.
Au cours du processus d'évaluation de l'observateur, chaque objet observable qui est pris enregistrera l'observateur actuel comme abonné et deviendra une dépendance de l'observateur actuel.
Lorsqu'un objet observable dépendant est attribué, il informe tous les abonnés de réévaluer et déclenche des mises à jour correspondantes.
L'avantage de s'appuyer sur la collecte est qu'il peut suivre avec précision et de manière proactive les modifications des données, et il n'y a pas deux problèmes avec les vérifications sales mentionnées ci-dessus. Cependant, les implémentations de collecte de dépendances traditionnelles, telles que le knockout, nécessitent généralement l'emballage des données natives pour créer des objets observables. Ils ont besoin d'utiliser des appels de fonction lors de la prise de valeurs et de l'attribution de valeurs. La méthode d'écriture est lourde et pas suffisamment intuitive lors de l'exécution des opérations de données; Dans le même temps, le support des objets avec des structures imbriquées complexes n'est pas idéale.
Vue.js utilise la méthode Object.DefineProperty d'ES5 pour transformer directement les propriétés de l'objet de données natif en getters et setters, implémentant la collecte de dépendances et le déclenchement dans ces deux fonctions, et prend parfaitement en charge les structures d'objets imbriquées. Pour les tableaux, les changements de tableau sont écoutés par des méthodes mutables qui enveloppent le tableau, telles que PUSH. Cela rend presque impossible d'exploiter les données de Vue.js et d'exploiter des objets natifs [Remarque: lors de l'ajout / supprimer des attributs, ou de la modification des éléments spécifiques dans un tableau, une fonction spécifique doit être appelée, telle que Obj. $ Add (clé, valeur) pour déclencher une mise à jour. Ceci est limité par les fonctionnalités linguistiques de l'ES5. ], la logique du fonctionnement des données est plus claire et plus fluide, et l'intégration avec des solutions de synchronisation des données tierces est également plus pratique.
Système de composant
Dans les applications à grande échelle, pour la division du travail, de la réutilisation et de la maintenabilité, nous devons inévitablement abstraction de l'application en plusieurs modules relativement indépendants. Dans un modèle de développement plus traditionnel, nous ne ferons partie du composant que lors de l'examen du multiplexage; Mais en fait, l'interface utilisateur de type application peut être considérée comme entièrement composée d'arbres de composants:
Par conséquent, les composants sont utilisés comme concept de base dans la conception de vue.js. On peut dire que chaque application Vue.js est développée autour des composants.
L'enregistrement d'un composant Vue.js est très simple:
Vue.component ('my-composant', {// modèle modèle: '<div> {{msg}} {{privatemsg}} </div>', // Accepter les accessoires de paramètres: {msg: string <br>}, // données privées, vous devez retourner dans la fonction pour éviter les instances multiples partageant des données objets: fonction () }}})Après l'enregistrement, vous pouvez appeler un composant enfant dans le modèle de composant parent comme un élément personnalisé:
<my-composant msg = "hello"> </ my-composant>
Résultat de rendu:
<div> Bonjour composant! </div>
Le composant Vue.js peut être compris comme une classe ViewModel avec un comportement prédéfini. Un composant peut prédéfinir de nombreuses options, mais les plus importantes sont les suivantes:
Format de composant unique en fonction des outils de construction
La bibliothèque principale de Vue.js fournit uniquement des API de base et n'a pas trop de contraintes sur la façon d'organiser la structure de fichiers de l'application. Cependant, lors de la création de grandes applications, il est recommandé d'utiliser la combinaison de WebPack + Vue-chargedeur pour rendre le développement des composants plus efficace.
WebPack est un outil de construction de modules frontal open source développé par Tobias Koppers. Sa fonction de base consiste à emballer plusieurs fichiers JavaScript écrits au format de module en un seul fichier et à prendre en charge les formats CommonJS et AMD. Mais ce qui le rend unique, c'est qu'il fournit une API de chargeur puissante pour définir la logique de prétraitement pour différents formats de fichiers, ce qui nous permet d'utiliser CSS, des modèles et même des formats de fichiers personnalisés comme modules JavaScript. WebPack peut également implémenter un grand nombre de fonctions avancées basées sur le chargeur, telles que l'emballage de section automatique et le chargement à la demande, le positionnement automatique des références de ressources d'image, la décision sur la base64 en ligne basée sur la taille de l'image, le remplacement à chaud des modules pendant le développement, etc.
J'ai développé le plugin Vue-chargedeur basé sur l'API WebPack Loader, afin que nous puissions écrire des composants Vue dans un tel format de fichier (* .vue):
<style> .my-composant h2 {couleur: rouge;} </ style> <mpelate> <div> <h2> bonjour de {{msg}} </h2> <autre composant> </our-composant> </div> </ template> <cript> // Suivre le module Commonjs Format var autre composant = exigence ('./ {data: function () {return {msg: 'vue-woader'}}, composants: {'autre composant': autrecomponent}} </ script>Dans le même temps, vous pouvez également utiliser d'autres préprocesseurs dans le fichier * .vue, il suffit d'installer le chargeur WebPack correspondant:
<style lang = "stylus">. My-composant H2 Color Red </ Style> <template Lang = "Jade"> div.my-composant h2 bonjour de {{msg}} </ template> <script Lang = "Babel"> // Utiliser Babel pour compiler Es2015Export defaute }}} </ script>Ce format de composant intègre les trois éléments du modèle, le style et la logique d'un composant dans le même fichier, ce qui est pratique pour le développement, la réutilisation et la maintenance. De plus, Vue.js prend en charge le chargement asynchrone des composants, et combiné avec la fonction de emballage de Chunking de WebPack, il peut facilement implémenter le chargement asynchrone des composants à la demande.
Autres caractéristiques
Vue.js a plusieurs autres fonctionnalités à mentionner:
Créer une instance Vue à l'aide de New Vue ()
Nous pouvons d'abord initialiser une page HTML, puis nous devons introduire le fichier JS de Vue. Il existe de nombreuses façons de l'introduire. Nous pouvons introduire le CDN de Vue dans Script, ou télécharger Min.js de Vue sur le site officiel, ou installer une dépendance VUE à l'aide de NPM. Pour plus de commodité, cet article est introduit en utilisant CDN.
<! Doctype html> <html> <éadf> <itle> Apprenez à partir de zéro </ title> </ head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </cript> </dance> </html>
Lorsque vous développez, assurez-vous d'utiliser des versions non compressées, car les versions non compressées fourniront des avertissements détaillés utiles et vous feront gagner beaucoup de temps sur votre écriture de code.
Nous écrivons d'abord un div dans le corps, créons une instance Vue, puis lions l'instance et la div.
Lorsque vous créez une nouvelle instance VUE, utilisez le constructeur Vue () et signalez votre point de montage dans votre instance. Ce point de montage est la limite de l'instance Vue que vous souhaitez diviser. Le point de montage et la limite d'instance correspondent un par un. Vous ne pouvez gérer les transactions que dans la limite de l'instance au point de montage, mais pas les transactions en dehors de la limite de l'instance à votre point de montage.
Le paramètre pour régler le point de montage dans l'instance Vue est "El", et la valeur d'El peut être définie par l'élément DOM.
<! Doctype html> <html> <éadf> <ititle> Apprenez à partir de zéro </title> </ head> <body> <div id = "vueInstance"> Ceci est la limite d'instance du point de montage d'instance </ div> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </ script> une nouvelle instance Vue et définissez le point de montage var v = new Vue ({el: '#vueInstance'}); </cript> </ body> </html>Comme vous pouvez le voir ci-dessus, New Vue () crée une nouvelle instance, puis spécifiez un élément DOM comme point de montage de l'instance. Lors de la définition du point de montage, nous utilisons l'ID du sélecteur CSS pour le définir. Le nom instancié peut également être défini par lui-même pour l'appel ultérieur.
Utilisation du modèle V pour la liaison des données bidirectionnelles
Nous pouvons utiliser le modèle V pour lier la boîte d'entrée d'entrée, nous pouvons donc utiliser dynamiquement pour obtenir la valeur de l'objet de données. Vous pouvez considérer le modèle V comme une propriété spécifiée, tout comme l'attribut d'un élément HTML. La liaison des données bidirectionnelle ici peut être utilisée sur de nombreux éléments de formulaire, tels que l'entrée, le textarea et la sélection.
Vue utilise la commande V-model pour lier des données, et ces données sont les données que nous espérons être mises à jour grâce aux opérations d'entrée utilisateur.
Par exemple, dans notre exemple ci-dessous, nous voulons lier le nom de données sur la balise d'entrée, et nous devons implémenter la déclaration dans l'objet de données dans l'instance Vue.
<div id = "vueInstance"> Entrez votre nom: <input type = "text" V-model = "name"> </div>
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </ script> // Après cette ligne sera omise <Script> var v = new Vue ({el: '#vueInstance', data: {nom: '_appian'}}); </ script>Peu importe le nombre de fois que l'utilisateur entre, ce nom sera automatiquement mis à jour. De plus, si la valeur du nom est modifiée, les valeurs dans d'autres endroits où le nom est mappé sera également modifiée.
La raison de la modification synchrone de cette boîte de saisie et du mappage est d'utiliser l'instruction du modèle V pour permettre aux données d'être liées à travers le flux de données sous-jacentes, puis modifiée directement. Il s'agit du concept de liaison bidirectionnelle des données.
Pour prouver ce concept, nous pouvons utiliser $ data pour imprimer la cartographie des données à voir.
<div id = "vueInstance"> Entrez votre nom: <input type = "text" V-model = "name"> <p> {{$ data | JSON}} </p> // # 1 <p> {{name}} </p> // # 2 </div> <Script> var v = new Vue ({el: '#vueinstance', data: {name: '_appian'}}); </ script>C'est 1:
$ data est l'objet de données observé par l'instance Vue. Le type essentiel est un objet, il peut donc être converti en JSON. Peut être remplacé par un nouvel objet. L'instance indique les propriétés de son objet de données.
{{}}, interpolate avec deux accolades bouclées. La valeur insérée ici est la valeur qui change en temps réel par $ data.
| JSON, juste un moyen plus intuitif d'afficher les données. Il peut également être considéré comme un filtre, tout comme l'effet de JSON.Strinify ().
Article 2:
{{name}} signifie insérer des variables de données directement dans l'expression d'interpolation et deux accolades bouclées pour mapper directement la valeur du nom.
Vue est si simple pour effectuer une liaison bidirectionnelle des données. Il ne nécessite qu'une instruction du modèle V, sans utiliser JS ou JQ pour contrôler les données. Je crois que vous pouvez clarifier la logique à partir des exemples ci-dessus.
Utilisez V-on pour la liaison des événements
Vue utilise des instructions V-on pour l'écoute des événements et la distribution d'événements. Vous pouvez créer une méthode pour lier l'événement d'écoute dans l'instance Vue, et vous pouvez créer une méthode pour expédier un événement de clic.
Dans l'exemple suivant, nous créerons une méthode Say, qui est liée à un bouton. L'effet du clic est de faire apparaître une boîte de bienvenue avec le nom d'utilisateur. Afin d'attribuer cette méthode au bouton, nous devons utiliser V-on: cliquez pour lier l'événement.
<div id = "VueInstance"> Entrez votre nom: <entrée type = "Text" V-model = "Name"> <Button V-on: click = "Say"> Bienvenue pour cliquer </ bouton> // # 1 <Button @ cliquez sur = "Say"> Bienvenue pour cliquer </ Button> // # 2 </ div>
<Script> var v = new Vue ({el: '#vueinstance', data: {name: '_appian'}, méthodes: {dire: function () {alert ('bienvenue' + this.name);}}}); </ script>Bien sûr, non seulement vous pouvez lier les événements de cliquez sur Cliquez, mais vous pouvez également lier d'autres événements de souris, des événements d'entrée au clavier et d'autres types d'événements JS. Par exemple, V-on: MouseOver, V-ON: Keydown, V-on: Soumider, V-on: KeyPress, V-on: Keyup.13, etc., ou d'autres événements personnalisés.
Pendant le processus de développement, vous pouvez fréquemment utiliser la liaison des événements. Il est un peu gênant d'écrire V-on, donc dans l'exemple ci-dessus, il y a deux façons d'écrire, # 2 est l'abréviation de # 1. En utilisant @ au lieu de V-on, je ne dirai pas grand-chose ici.
Utilisez V-if ou V-show pour faire des jugements conditionnels
Si nous voulons que l'utilisateur voient la fenêtre contextuelle de bienvenue après la connexion, et si nous ne sommes pas connectés, nous lui donnerons une interface de connexion. Vue nous fournira des instructions V-IF et V-show pour contrôler le contenu d'affichage sous différents états de connexion.
En utilisant l'exemple précédent, nous pouvons utiliser la valeur de Logginstatus pour contrôler s'il faut se connecter. Si c'est vrai, la zone d'entrée et le bouton seront affichés afin qu'il puisse voir la fenêtre contextuelle de bienvenue. Cependant, s'il est faux (c'est-à-dire qu'il n'est pas connecté), vous ne pouvez voir que la zone d'entrée et le bouton de soumission pour entrer le numéro de compte, mot de passe (il n'y a pas d'authentification pour le moment, seul l'état de connexion sera modifié).
<div id = "VueInstance"> // Section affichée lorsque Logginstatus est vrai <section v-if = "Loginstatus"> Entrez votre nom: <entrée type = "Text" V-Model = "Name"> <Button V-on: Click = "Say" Welcome pour cliquer </ Button> <Button @ Click = "SwitchLoginStatus"> LoginLoginStatus " Loginstatus est faux <section v-if = "! Loginstatus"> LoginPerson: <input type = "Text"> LogginPassword: <input type = "Motword"> <Button @ click = "switchLoginStatus"> Login </ Button> </ section> </ div>
<cript> var v = new vue ({el: '#vueinstance', data: {name: '_appian', loginstatus: false}, méthodes: {Say: function () {alert ('bienvenue' + this.name);}, switchloginstatus: function () {this.loginstatus =!L'exécution de ceci est l'instance V. Ce point de pointe est une question qui doit être comprise par soi-même, donc je n'en parlerai pas ici.
Dans l'exemple ci-dessus, tant que V-if est remplacé par un spectacle V, le même effet peut être obtenu. V-IF et V-show prennent en charge V-Else, mais l'élément frères précédent de la balise qui lie la commande V-else doit avoir V-if ou V-show.
Dans l'exemple ci-dessus, le simple fait de cliquer sur le bouton "Connexion" ou "Connexion out" déclenchera la méthode SwitchLoginStatus. Tant que cette méthode est déclenchée, l'état de Loginstatus changera (commutation en vrai et faux), modifiant ainsi le changement du résultat de la condition de jugement de V-if dans HTML. Sur la base de l'état booléen actuel de Loginstatus, la section affichée est une section dans différents états.
Quelle est la différence entre V-show et V-if?
Lors de la commutation de blocs V-IF, Vue a un processus de compilation / désinstallation local, car les modèles dans V-IF peuvent également inclure la liaison des données ou les sous-composants. V-if est un rendu conditionnel réel car il garantit que les blocs conditionnels détruisent et reconstruisent correctement les auditeurs d'événements et les sous-composants dans le bloc conditionnel pendant le commutateur.
V-if est également paresseux: si la condition est fausse pendant le rendu initial, rien n'est fait - la compilation locale commence lorsque la condition devient vraie pour la première fois (la compilation sera mise en cache).
En revanche, V-show est beaucoup plus simple - les éléments sont toujours compilés et préservés, tout simplement commutés en fonction de CSS.
D'une manière générale, le V-IF a une consommation de commutation plus élevée et le spectacle V a une consommation initiale plus élevée. Par conséquent, il est préférable de changer fréquemment de spectacle en V, et il est préférable de changer V-IF si les conditions ne sont pas très élevées au moment de l'exécution.
Cette différence peut ne pas être importante pour votre développement actuel, mais vous devez toujours faire attention et faire attention, car lorsque le développement de votre projet deviendra plus important, cela deviendra important.
Utiliser la liste V-For pour sortir
Si vous êtes un homme d'affaires qui gère une plate-forme de commerce électronique, vous devez avoir de nombreuses pages qui doivent rendre la sortie de la liste de produits. La directive V-FOR permet de boucler notre objet Array, prononcé comme "boucle de chaque élément dans ArrayObj" à la manière de "l'élément dans ArrayObj".
Dans l'exemple suivant, nous utiliserons l'instruction V-FOR pour éloigner une liste de produits. Chaque produit sera dans un LI, où le nom, le prix et le type de produit du produit sont sortis.
<div id = "vueInstance"> <ul> <li v-for = "el in Products"> {{el.name}} - ￥ {{el. Prix}} - {{El. catégorie}} </li> </ul> </div> <cript> var v = new vue ({el: '#vueinstance', data: {Products: [{name: 'microphone', prix: 25, catégorie: 'electronique'}, {name: 'case d'ordinateur 70, catégorie: 'Electronics'}, {name: 'souris', prix: 40, catégorie: 'electronics'}, {name: 'écouteurs', prix: 20, catégorie: 'electronics'}, {name: 'monitor', prix: 120, catégorie: 'Electronics'}]}}); </cript>Bien sûr, l'objet de tableau dans les données peut être défini sans la définition ci-dessus. Nous pouvons l'importer de la base de données ou utiliser la demande AJAX pour l'obtenir. C'est juste pour la démonstration de V-For.
Parfois, nous pouvons avoir besoin d'obtenir l'indice correspondant du produit dans l'objet Array. Nous pouvons l'obtenir avec $ index.
// # 1 <li v-for = "el in Products"> {{$ index}} - {{el.name}} - ￥ {{el. Prix}} - {{El. catégorie}} </li> // # 2 <li v-for = "(index, el) dans les produits"> {{index}} - {{el.name}} - ￥ {{el. Prix}} - {{El. catégorie}} </li>Propriétés calculées
Dans le scénario d'application des attributs de calcul, il sera utilisé lorsqu'il existe une valeur variable qui doit être calculée par d'autres variables.
Par exemple, si l'utilisateur entre un numéro x dans la zone d'entrée, il reviendra automatiquement à l'utilisateur le carré X² du numéro. Vous devez lier les données de la boîte d'entrée, puis lorsque les données sont modifiées, elle calculera immédiatement son carré.
<div id = "vueInstance"> Entrez un nombre: <input type = "text" V-model = "value"> <p> Résultat de calcul: {{carré}} </p> </div> <Script> var v = new vue ({el: '#vueinstance', data: {value: 1}, calculé: {square: function () {return this.value * this.value;}}}); </ script>Calculez les valeurs de définition d'attribut en définissant une série de fonctions, tout comme lorsque nous avons défini les objets de méthodes auparavant. Par exemple, la méthode carrée est utilisée pour calculer la variable "carré", et la valeur de retour de sa méthode est le produit de deux
Ensuite, nous pouvons utiliser calculé pour faire un exemple plus compliqué. Le système prendra au hasard un nombre à moins de 1 ~ 10. L'utilisateur peut saisir au hasard un nombre à moins de 1 à 10 dans la zone d'entrée. Si l'entrée de l'utilisateur correspond au nombre aléatoire du système, le jeu réussira, sinon il échouera.
<div id = "vueInstance"> Entrez le nombre dans 1 ~ 10: <input type = "text" V-model = "value"> <p> Résultat de calcul: {{resultmsg}} </p> </div> <script> var v = new Vue ({el: '#vueinstance', data: {value: null, randnum: 5 // le premier nombre aléatoire est 5}, méthodes: {getrandnum: function (min, max) {return math.floor (math.random () * (max - min + 1) + min;}}, calculé: {résultat: fure (this.value == this.randnum) {this.randnum = this.getrandnum (1, 10);post-scriptum
Jusqu'à présent, vous avez pu maîtriser l'utilisation de base de Vue, l'un des cadres les plus simples et les plus beaux du monde. Sa construction a ses propres idées de conception complètes et devient de plus en plus populaire. Ce cadre est suffisamment petit et léger pour vous offrir une expérience utilisateur plus fluide dans votre développement et améliorer efficacement l'efficacité du développement. J'ai donné une série d'exemples ci-dessus, les avez-vous tous maîtrisés?