Fondamentalement, nous avons réglé toutes les directives sur le site officiel: http://vuejs.org/guide/index.html Ici, nous prenons une application de liste de TODO en tant qu'exemple pour fixer tous les seuls pertinents. Tout le code de cet article est sur github https://github.com/lihongxun945/vue-todolist
Instance Vue
Une application Vue est démarrée par une instance Root Vue Boot, et l'instance Vue est créée comme ceci:
var vm = new Vue ({// Options})Une instance est en fait une machine virtuelle dans le MVVM. Tous les attributs dans les données de l'objet de configuration entrant seront montés sur l'instance. Afin d'éviter de nommer les conflits, les méthodes intégrées de Vue seront montées sur l'instance avec des propriétés commençant par $.
L'instance passera par le cycle de vie suivant de la création à la destruction:
Pendant l'initialisation, environ trois étapes:
• Surveillance des données de liaison, c'est-à-dire la surveillance des données
• Compilation de modèles
• Insérer un document ou remplacer le DOM correspondant
# Vue Syntaxe de base
Liaison des données
Vue utilise une syntaxe du mastache. Les syntaxes de liaison couramment utilisées sont divisées en plusieurs catégories:
• Syntaxe mastache, telle que {{data}} {{data | filtre}}
• Propriétés de liaison en V-Bind, telles que V-Bind: Href, V-Bind: Classe
• Événements de liaison V-on, tels que V-on: Click, V-on: Soumettre
Parmi eux, V- * est directive
exemple:
<div v-bind: class = "[classa, isb? classb: '']">
Calcul d'attribut
Vue prend en charge une syntaxe de calcul d'attribut très intéressant. Vous pouvez spécifier qu'un attribut est calculé par d'autres attributs, vous n'avez donc pas besoin d'utiliser $ watch pour l'implémenter:
var vm = new vue ({el: '#example', data: {a: 1}, calculé: {// un getter calculé b: function () {// `ceci pointe vers l'instance VM return this.a + 1}}})## La syntaxe liée au contrôle et à la liste des processus inclut `V-if`,` V-show`, `V-else ',` V-For »
Formulaire
Liaison des données bidirectionnelle:
<input type = "text" V-model = "message" placeholder = "éditez-moi">
<input type = "checkbox" id = "jack" value = "jack" V-model = "checkedNames">
## La méthode d'animation de l'implémentation est la même que celle de l'angular et de la réaction, et est implémentée en ajoutant et en supprimant des classes. # Composant
Utilisation de base des composants
La définition du composant comprend deux parties:
1 Créer une classe de composants:
var profil = vue.extend ({template: "<div> lily </div>"});2 Enregistrez un nom de tagnom:
Vue.component ("me-profile", profil);
De cette façon, nous pouvons utiliser ce composant via TagName:
<div id = "todo"> <my-Profile> </ my-profile> <formulaire v-on: soumed = "add" v-on: soumed.prevent> <input type = "text" v-model = "input" /> <input type = "soume" value = 'add' /> </ form> ... </ div>
Vue.component ("me-profile", profil); est un enregistrement mondial. S'il n'est utilisé que dans une certaine page, il peut être enregistré localement:
var vm = new Vue ({el: "#todo", composants: {"my-profile": profil}, ...}Parce que notre instance Vue est liée à l'élément TODO, il n'est pas valide si mon profil est placé en dehors de cet élément. Ce n'est qu'en mettant à l'intérieur qu'il sera initialisé par cette instance de Vue.
Notes:
Les paramètres qui peuvent être adoptés par le constructeur Vue peuvent essentiellement être utilisés sur Vue.Extend, mais vous devez prêter attention aux deux paramètres d'EL et de données. Afin d'éviter de partager le même objet entre différentes instances, il est plus fiable de toujours renvoyer un nouvel objet via la fonction:
var myComponent = vue.Extend ({data: function () {return {a: 1}}})Parce que les paramètres sont les mêmes, ils sont en fait la même chose, mais l'un est un composant et l'autre est utilisé pour guider Vue pour commencer.
Notes sur les modèles
Parce que Vue est un DOM natif, certaines balises personnalisées peuvent ne pas respecter la norme DOM. Par exemple, si vous souhaitez personnaliser un TR dans le tableau, si l'insertion de mon composant ne répond pas directement à la spécification, vous devez l'écrire comme ceci:
<ballage> <tr is = "my-composant"> </tr> </ table>
Accessoires qui passent les données
Dans Vue, chaque composant est indépendant et ne peut pas et ne doit pas accéder directement aux données de la classe parent. Il est donc très similaire à la méthode de React pour transmettre des données aux sous-composants via des accessoires?
Contrairement à React, les sous-composants de Vue doivent d'abord déclarer leurs propres accessoires:
var profil = vue.extend ({accessoires: ["name"], modèle: `<h2> {{name}} S List Todo </h2> <h4> {{name}} est une bonne fille </h4>`});Ensuite, nous pouvons transmettre des paramètres comme celui-ci lors de l'utilisation du profil:
<my-profile name = 'Lily'> </ my-profile>
Il s'agit de passer des paramètres par le biais des littéraux, donc la valeur passée doit être une chaîne. Une autre façon consiste à transmettre les paramètres dynamiquement et à passer les paramètres via la ligne V. Vous pouvez lier les données dans les paramètres non-chaîne bidirectionnels ou transmettre:
<my-profil V-Bind: name = 'input'> </ my-profile>
Si V-Bind est une chaîne, c'est le champ correspondant dans les données du composant parent, par exemple, ce qui précède est la valeur de l'entrée qui est liée dans les deux directions. S'il s'agit d'un nombre, il est lié à un nombre.
Vue peut également spécifier explicitement la liaison des données à sens unique ou bidirectionnelle:
<! - Par défaut, liaison à un sens unique -> <child: msg = "parentmsg"> </fft> <! - Explicit biway binding -> <child: msg.sync = "parentmsg"> </ child> <! - Explicit unique liant -> <ffre
Vérification des accessoires
Un bon composant doit toujours vérifier que les paramètres sont corrects en premier et peuvent également avoir besoin de définir les valeurs par défaut de certains paramètres:
var profil = vue.extend ({input: {type: string}});Communication des composants parent-enfant
Les accessoires mentionnés ci-dessus sont en fait un moyen pour le composant parent de transmettre des messages au composant enfant.
Dans le composant enfant, il y a un parent ce. $ Et cette racine. $ Qui peut être utilisé pour méthodes le composant parent et l'instance racine. Cependant, nous devons maintenant éviter de le faire. Étant donné que le composant lui-même est de résumer la logique indépendante, si vous accédez directement aux données du composant parent, il détruira l'encapsulation du composant.
Nous devons donc toujours communiquer via le composant parent transmettant des accessoires au composant enfant.
Bien sûr, les accessoires ne peuvent faire que des rappels. Cette question a été discutée dans React. La méthode de réaction consiste à utiliser des accessoires pour transmettre une fonction de rappel au composant enfant. En fait, je n'aime pas vraiment cette façon de passer des fonctions de rappel, je préfère la manière des événements. Vue Neutronics peut communiquer avec le composant parent via des événements. L'envoi de messages au composant parent est via ce. $ Dispatch, et l'envoi de messages au composant enfant se fait via ce. $ BoardCast. Ici, les messages sont envoyés à tous les parents et enfants, mais une fois un rappel exécuté, il s'arrête à moins que la fonction de rappel ne renvoie explicitement vrai.
Nous avons divisé la liste TODO précédente en différents composants pour l'implémenter, afin que nous puissions découvrir comment communiquer avec des composants à deux voies. Nous avons séparé deux composants, à savoir la liste et la forme.
Le formulaire est responsable du traitement de l'entrée des utilisateurs et de l'envoi d'un message ADD au composant parent lors de la soumission du formulaire. Le code est le suivant:
var form = vue.extend ({accessoires: {nom d'utilisateur: {type: chaîne, par défaut: "non nommé"}}, data: function () {return {input: "",};}, template: `<h1> {{username}} V-model = "input" /> <input type = "soumide" value = 'add' /> </ form> `, méthodes: {add: function () {this. $ dissatch (" add ", this.input);La liste est uniquement responsable de l'affichage de la liste et de la gestion des opérations de vérification des utilisateurs. Après avoir reçu le message d'ajout, il ajoutera une entrée sur elle-même:
var list = vue.extend ({template: `<ul> <li v-for = 'todo in list'> <étiquette v-bider: class =" {tit: todo.done} "> <entrée type =" checkbox "v-model =" todo.done "/> {{todo.title}} </vabe> </li> </ ul>`,}} </ labor Array}}, data: function () {return {list: []}}, événements: {add: function (input) {if (! Input) return false;Ensuite, parce que ce sont deux composants, bien sûr, une instance Vue est nécessaire pour amorcer le démarrage, notre instance est la suivante:
var vm = new vue ({el: "#todo", composants: {"todo-form": form, "todo-list": list}, events: {add: function (input) {this. $ Broadcast ("add", input);}}});Notez qu'en fait, la forme et la liste sont logiquement des composants parallèles, ils n'ont donc aucune relation père-fils, et ils sont tous des enfants de la machine virtuelle. Ici, VM le transmettra pour la liste après avoir reçu le message de formulaire.
Le code HTML est plus simple:
<div id = "todo"> <todo-forme username = 'Lily'> </ todo-form> <todo-list> </ todo-list> </div>
Fente
L'enclassement peut être utilisé pour insérer le HTML rendu à partir du composant parent dans le composant enfant. Il n'est pas clair quand cela sera nécessaire, et c'est trop invasif pour le composant enfant.
Composants de commutation dynamique
Cette fonction semble un peu redondante. Dans de nombreux cas, nous devons passer à travers du code logique plutôt que via des composants dynamiques intégrés Vue. Cependant, il est très pratique d'implémenter une fonction similaire à la commutation d'onglet.
Ici, nous ajoutons une page à propos de la liste TODO. Nous devons donc d'abord changer de VM en un composant, qui est appelé TODO, qui est toute la page TODO:
var todo = vue.extend ({template: `<div id =" todo "> <todo-forme username = 'lily'> </ todo-form> <tododo-list> </ todo-list> <slot> pas afficher </slot> this. $ Broadcast ("add", entrée);}}});En fait, la première ligne de modifications est la première ligne.
Ensuite, nous devons créer un composant autour:
var about = vue.extend ({template: `<div id =" À propos "> <p> À propos de la liste TODO V0.1.0 </p> <p> Contenu ici </p> </div>`});Vient ensuite le point clé. Nous voulons créer une machine virtuelle d'instance, qui est chargée de changer ces deux pages:
var vm = new vue ({el: "body", data: {currentView: "todo"}, composants: {"todo": todo, "à propos": à propos}});Ici, nous définissons un champ CurrentView, qui peut bien sûr être n'importe quel nom, puis utilisons une balise de composants spéciaux pour changer de composants:
<Component: Is = "CurrentView"> </ Component> <ul> <li> <Belle> <Input Type = "Radio" Name = 'Page' Value = 'TODO' V-Model = 'CurrentView'> Home </ Label> </li> <li> <Beld> <Input Type = "Radio" Name = 'Page' Value = 'About' V-Model = 'CurrentView'> About </ Label>
Il y a deux choses à noter dans le code ci-dessus:
• Utilisez le composant TAG spécial, puis utilisez la propriété: IS pour changer de composants.
• Radio Modifiez le champ CurrentView via une liaison bidirectionnelle, afin que vous puissiez changer après avoir cliqué.
Le principe de mise en œuvre de la liaison des données
Vue appelle la liaison bidirectionnelle réactive, qui peut être traduite par liaison de données réactive. Il est implémenté en interne via les méthodes Getter et Setter définies par ES5, donc il ne prend pas en charge IE8 et les navigateurs suivants. Il y a deux choses faciles pour faire des erreurs dans cette implémentation:
• Si vous ajoutez et supprimez directement les attributs sur les données, il est impossible de détecter. Généralement, la suppression ne sera pas possible, mais peut être ajoutée dynamiquement. À l'heure actuelle, il doit être ajouté via Vm. $ Set ("Name", valeur).
• Les modifications à l'intérieur de l'objet ne peuvent pas être détectées, c'est-à-dire qu'elles ne peuvent détecter que des changements dans la propriété des données. Si data.a est un objet, alors data.ab = 1 Ce changement ne peut pas être détecté. Dans ce cas, vous devez créer un nouvel objet et les attribuer à Data.A.
Mécanisme de mise à jour asynchrone
La mise à jour de Vue vers Dom est asynchrone! Cet asynchrone est effectué dans une file d'attente asynchrone, mais cette file d'attente asynchrone sera exécutée dans la boucle d'événement actuelle. Par conséquent, si vous modifiez les données, il est faux d'aller immédiatement au DOM pour effectuer l'opération de requête. À l'heure actuelle, le DOM n'a pas encore été mis à jour. La bonne façon est de faire ceci:
vm.msg = 'nouveau message' // modifier dataVm. $ el.textContent === 'nouveau message' // falsevue.nexttick (function () {vm. $ el.textContent === 'new message' // true})Ou ceci:
vm. $ nextTick (function () {this. $ el.textContent === 'nouveau message' // true})Il a fallu beaucoup de temps pour lire les composants. Voici un autre point: directive
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.