Vue.js est une bibliothèque pour créer des interfaces Web basées sur les données. L'objectif de Vue.js est d'implémenter des composants de liaison des données et de vue combinés via l'API la plus simple possible. (Ceci est une explication officielle!)
L'éditeur n'a jamais utilisé AngularJS, et React.js n'a pas été utilisé. Je ne peux pas expliquer les différences dans les trois en détail. Si vous voulez savoir, il y a une analyse officielle. Veuillez cliquer ici pour le voir.
L'éditeur est engagé dans le développement frontal depuis plus d'un an. Au début, il y avait trop de technologies dans le développement frontal. L'éditeur était impuissant et ne pouvait pas prendre en compte. Après avoir compris, il a choisi d'apprendre le chemin d'apprentissage de l'apprentissage des fusions de base JS natives et JQuery. L'éditeur utilise Vue.js en raison des besoins commerciaux. Pourquoi ne choisissez-vous pas AngularJS? En fait, vous ne pouvez pas abandonner JQuery en même temps. Vue.js et jQuery peuvent être parfaitement compatibles. En raison de ce projet, l'éditeur fait des heures supplémentaires depuis longtemps et étudie constamment pour éviter l'augmentation du temps de développement du projet. Sans plus tarder, commençons une partie du résumé de l'apprentissage Vue de l'éditeur. Si vous n’écrivez pas bien, n’y êtes pas habitué. L'écriture d'articles a toujours été ma faiblesse. . . .
Voici l'exemple de Vue, comme la chaîne parentale
Le composant enfant peut être passé. Parent son composant parent. L'instance racine est accessible à l'aide de ce.ROOT. Le parent a un tableau de ces enfants et de tous ses éléments; Bien sûr, dans le projet, nos composants ne peuvent en avoir qu'un ou deux. Lorsqu'il y a trop de composants, il est difficile pour nous de nous souvenir de l'emplacement du composant chez les enfants. Nous pouvons utiliser la directive V-Ref pour créer un crochet pour notre composant. Ce crochet est l'index lorsque nos autres composants accèdent au composant.
// Ceci est l'un de mes composants <msg v-ref: msgs> </sg> // Pour le moment, nous avons établi un index de MSGS pour ce composant MSG // Nous pouvons accéder au composant var vm = new Vue ({}); var enfants = vm. $ Refs.msgs // Accédez à nos composants enfants de cette manière // V-Ref est un tableau ou un objet, qui est une collection de composants que nous créons tous les crochets ref.Ici, je vais vous montrer une image et je vais jeter un œil au contenu lié aux parents, aux enfants et aux $ refs (il semble que l'image soit un peu floue et ce ne sera pas une image dynamique complète. C'est embarrassant et ne peut pas voir clairement. Vous pouvez créer une démo et l'imprimer!)
Bien que nous puissions accéder directement aux composants dans l'ensemble de l'instance de cette manière, il n'est pas recommandé de le faire, car il est très mauvais pour les enfants de modifier directement l'état du composant parent, ce qui rendra les composants parents et enfants serrés. Idéalement, chaque composant ne peut modifier son propre état que car la portée de chaque composant est indépendante;
Dans ce cas, Vue nous apporte également leurs événements personnalisés
Utilisez $ Dispatch () pour expédier les événements, et les événements bouillonnent le long de la chaîne parentale;
Utilisez $ Broadcast () pour diffuser des événements et les événements sont transmis à tous les descendants.
Cela semble un peu abstrait, c'est plus facile à comprendre avec un exemple
// $ Dispatch () Bubble Case <! - Exemple -> <div id = "app"> <! - Component Communication 1 -> <ection> <div> <label for = ""> msg data: </ label> {{msg}} </div> <! - Sous-composent -> <sg> </sg> </prection> </v> <template id = "msg"> </sg> </preing = " V-model = "msg"> <a href = "javascript:;" @ click = "add_data"> add </a> </div> </ template> <script> vue.component ('msg', {// Le sucre de syntaxe est utilisé pour enregistrer directement le composant, et le modèle simple et raccourci: '# msg', data: function () {return {msg: 'ABC'}}, les méthodes: {add_data: fure La méthode $ Dispatch () sera déclenchée; // Cette méthode consiste à utiliser directement le composant parent ce. $ Dispatch ('add_msg', par_msg); 'add_msg': fonction (msg) {// add_msg est une méthode utilisée pour écouter le sous-composant.Après avoir lu ce code, je crois que tout le monde connaît l'utilisation de $ Dispatch (). En fait, il y a deux paramètres. Le premier paramètre est que le composant parent écoute un nom de méthode dans l'objet d'événements du composant enfant. Les deux doivent être cohérents; Le deuxième paramètre est les données mises à jour par le composant enfant, qui est également transmise aux données pour être mise à jour de manière synchrone avec le composant parent. Ensuite, le composant parent utilise ce paramètre pour effectuer des opérations correspondantes.
// L'utilisation de la méthode $ Broadcast () est la même que celle de $ Dispatch (). La différence est que l'objet d'événement est créé dans le composant enfant, et la fonction déclenchée sur le composant parent est au contraire. Ce que nous voulons dire ici, c'est que si les données du composant enfant dépend complètement des données du composant parent, il n'est pas nécessaire d'utiliser la méthode de livraison des événements généraux. Il vous suffit d'obtenir les données du composant parent via des accessoires et de les lier au composant enfant.
<! - Méthode de communication du composant 2 $ Broadcast () -> <section> <h3> Source de données ajoutée par le composant parent: </h3> <div> <label for = ""> id: </ label> <div> <input type = "Text" V-model = "id"> </ div> </ div> <div> <label for = ""> name: </ label> <v> <fut type = "Text" V-model = "name"> </ div> </ div> <div> <label for = ""> hôte: </ label> <v> <input type = "text" v-model = "inst"> </ div> </ div> <div> <label for = ""> host: </ label> <v> <entrée type = "Text" v-model = "Inst"> </v> </v> pour = ""> </bablace> <div> <a href = "javascript:;" @ click = "add_table"> add </a> </div> </div> <h3> Le tableau suivant est les informations sur le composant enfant: </h3> <! - Bind les données Table_Data du composant parent au composant enfant -> <template: data = "Table_Data"> </ventcase> </prect> <template id = "Broadcase"> <div> <Bile> <Thead> <Tr> <Th> ID </ Th> <th> Name </ Th> <Th> Hobbies </th> </tr> </ tbody> <tr V-for = "List in Data"> <Td> {{list.id}} </td> <td> {{list.name}} </ td> <td> list.inst}} </td> </tr> </ tbody> </s table> </div> </piltlate> <cript> vue.component ('Broadcase', {// Il s'agit du sucre de syntaxe utilisé pour enregistrer le composant, et le modèle simple et shortcut: '# Broadcase', props: ['data'], //, les propres sont utilisés pour accepter les paramètres de la comporce des parents. Si les données doivent avoir une valeur par défaut, vous devez définir les données dans les données: fonction () {return {msg: 'ABC'}}, événements: {// Ce n'est qu'un exemple, le composant enfant écoute les changements de données du test du composant parent: la fonction (msg) {console.log (msg);}}, méthodes: {}}); '#app',data: {table_data: [{id: 1,name: 'gjei',inst: 'gjweir'},{id: 2,name: 'jiuyer',inst: 'oiuyt'}] },methods: {add_table: function(){var set = {id: this.id,name: this.name,inst : this.inst}; this.table_data.push (set); // this. $ Broadcast ('test', set);Vous pouvez cliquer ici pour tester les deux exemples mentionnés ci-dessus. Le fichier a été téléchargé sur la démo de communication du composant parent-enfant de l'espace personnel Vue
Quand j'ai fini d'écrire ceci, j'ai regardé en arrière et j'ai vu que le contenu que j'ai écrit semblait un peu désordonné, ce qui avait vraiment honte! J'ai pensé à écrire un blog et à construire ma propre bibliothèque de notes il y a longtemps, mais quand j'ai essayé de l'écrire avant, je ne pouvais vraiment pas le faire. Récemment, j'ai pris ma décision d'insister pour écrire, peu importe comment je l'écrit. Et si mon style d'écriture s'améliore soudainement un jour!
En fait, l'application n'est pas très difficile. Il fournit en fait une surveillance correspondante de l'interface API. Comment utiliser et modifier l'application de projet réelle doit encore être écrite par nous-mêmes. La clé est d'améliorer notre niveau JS. Après tout, il y a de plus en plus d'applications Web complexes! J'espère que les étudiants qui aiment le front-end peuvent s'encourager les uns les autres sur la route de JS.