introduire
Vue.js est une bibliothèque utilisée pour créer des interfaces d'application Web
Techniquement, Vue.js se concentre sur la couche ViewModel du mode MVVM, qui relie les modèles de vision et de liaison des données de deux manières. Le format de fonctionnement et de sortie DOM réel est abstrait en instructions (directives) et filtres (filtres)
Dans le domaine de la philosophie, essayez de rendre l'API de liaison des données MVVM aussi simple que possible. La modularité et la composabilité sont également des considérations de conception importantes. Vue n'est pas un cadre complet, il est conçu pour être simple et flexible. Vous pouvez l'utiliser pour prototyper rapidement, ou mélanger et assortir avec d'autres bibliothèques pour définir la pile frontale.
Vue. L'API JS fait référence à AngularJS, knockoutjs racactive.js rivets.js. Malgré les similitudes, je crois que Vue.js fournit un moyen précieux d'obtenir votre valeur dans certains cadres existants maintenant
Même si vous êtes déjà familier avec certains de ces termes, il est recommandé de faire passer la vue d'ensemble suivante des concepts, car les concepts de ces termes peuvent différer ci-dessous Vue.js
Aperçu du concept
ViewModel
Un objet, synchronise les modèles et les vues. Dans Vue.js, ViewModels est le constructeur ou la sous-classe instanciée
var vm = new Vue ({/ * Options * /})C'est l'objet principal avec lequel vous interagissez en tant que développeur en utilisant Vue.js. Pour plus de détails, voir Classe: Vue.
Voir
Le HTML / DOM réel vu par l'utilisateur
Vm. $ el // La vue
Lorsque vous utilisez Vue.js, vous ne toucherez guère l'opération DOM à l'exception de vos propres instructions personnalisées. Lorsque les données sont mises à jour, la mise à jour de la vue sera automatiquement déclenchée. La mise à jour de la vue peut être atteinte avec précision à chaque nœud TestNode. Ils sont également parvenus et exécutés de manière asynchrone pour offrir de meilleures performances.
Modèle
Ceci est un objet JavaScript légèrement modifié
Vm. $ DATA // Le modèle
Dans Vue.js, le modèle est juste un objet JavaScript simple, un objet de données, vous pouvez manipuler leurs propriétés et afficher les modèles, observer les leurs, puis faire changer les notifications. Vue.js utilise Getter / Setter d'ES5 pour convertir les propriétés dans Data Object Hu, qui permet un fonctionnement direct sans vérification sale.
L'objet de données aura des mutations à des moments appropriés, donc la modifier est la même chose que la modification des données VM. $ Par référence. Cela facilite également plusieurs instances ViewModel pour observer le même élément de données.
Pour les détails techniques, veuillez vous référer aux options d'instanciation: données.
Directives
L'attribut HTML privé indique à Vue.js de faire un certain traitement à propos de DOM
<div v-text = "message"> </div>
L'élément div a ici une instruction en V-Text, et la valeur est le message. Cela signifie dire à Vue.js de garder le contenu de ce nœud div synchronisé avec l'attribut de message dans ViewMode
Les instructions peuvent encapsuler n'importe quelle opération DOM. Par exemple, V-ATTR fonctionne sur un élément d'attribut, le clonage en V-REPEAT d'un élément basé sur un tableau, V-on Event Event Event, nous en discuterons plus tard.
Reliures à la moustache
Vous pouvez également utiliser des liaisons de style moustache, dans le texte et les propriétés. Ils sont traduits dans la directive V-Text V-ATTR. Par exemple:
<div id = "personne - {{id}}"> Bonjour {{nom}}! </div>Bien que pratique, il y a quelques choses auxquelles vous devez faire attention:
Si un attribut SRC d'image est défini, une demande HTTP sera envoyée, donc lorsque le modèle analyse pour la première fois, il est préférable d'utiliser V-ATTR
Lors de l'analyse de HTML, Internet Explorer supprimera l'attribut de style interne non valide, donc si nous voulons prendre en charge CSS en ligne de liaison, j'utilise toujours le style V
À l'intérieur du V-HTML, vous pouvez utiliser trois accolades pour gérer le HTML non espéré, mais cela provoquera des attaques XSS potentielles et peut ouvrir des fenêtres. Par conséquent, il est recommandé de le faire uniquement lorsque les données sont absolument sûres ou nettoient le HTML non fiable via un filtre de pipeline personnalisé
Filtres
Ces données brutes peuvent être traitées à l'aide de fonctions avant de mettre à jour la vue. Ils utilisent une directive ou une liaison "pipeline":
<div> {{message | capitaliser}} </div>Maintenant, avant que le contenu texte de la div ne soit mis à jour, la valeur de ce message sera traitée via la fonction de capitalisation. Pour plus de détails, veuillez consulter les filtres en profondeur.
Composants
Dans Vue.js, un composant est un constructeur de modèles de vue simple enregistré avec Vue.Component (ID, constructeur). Avec un ID associé, la directive de composants V pour le modèle d'un autre modèle de vue peut être imbriquée. Ce mécanisme simple rend le modèle de vue déclaré réutilisé et combiné d'une manière similaire aux composants Web sans avoir besoin du dernier navigateur ou de polyfills lourds. En décomposant l'application en composants plus petits, le résultat est une base de code hautement découplée et maintenable. Pour plus de détails, voir Composer ViewModels.
Un exemple rapide
<div id = "Demo"> <h1> {{Title | uppercase}} </h1> <ul> <li v-repeat = "todos" v-on = "click: Done =! Done"> {{contenu}} </li> </ul> </div> var Demo = new Vue ({el: '#demo', data: {title: 'todos', todos: [{Done: true, contenu: 'Learn javascripTraduction approximative, veuillez souligner toutes les erreurs