Pourquoi utiliser vue.js ? Pourquoi 46 % des développeurs front-end l'utilisent-ils ?

Résumé en une phrase : en utilisant l'idée de liaison de données, Vue peut simplement écrire une seule page, un grand système frontal ou l'interface d'une application mobile.

1. Qu'est-ce que Vue.js ?

● Cadre progressif

● Conception de développement incrémental ascendant

● Facile à apprendre

● Facile à intégrer

Vue.js (prononcé /vju?/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur. Contrairement à d'autres frameworks lourds, Vue adopte une conception de développement incrémental ascendant. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue et est très facile à apprendre et à intégrer à d'autres bibliothèques ou projets existants. Vue, en revanche, est entièrement capable d'alimenter des applications complexes d'une seule page développées avec des composants et des bibliothèques à fichier unique pris en charge par l'écosystème Vue.

[Cours recommandés : Tutoriel vuejs]

2. À quel type d'interface est adapté vue.js ?

a. Il existe de nombreux éléments de formulaire

b Le contenu doit être modifié en fonction des opérations de l'utilisateur

Vue.js est un outil. pour créer des pages Web similaires à Zhihu, il s'agit d'une application Web qui comporte de nombreux éléments de formulaire et dont le contenu doit être modifié en fonction des opérations de l'utilisateur.

3. Qu'est-ce qu'une application à page unique (SPA) ?

Une page est une application (sous-application)

Comme son nom l'indique, une application monopage fait généralement référence à une page qui est une application. , il peut aussi s'agir d'une sous-application, par exemple Une page sur Zhihu peut être considérée comme une sous-application. Il y a généralement beaucoup de traitement interactif dans les applications à page unique, et le contenu de la page doit changer dynamiquement en fonction des opérations de l'utilisateur.

4. Je peux également utiliser JQuery pour écrire la version Web de Zhihu mentionnée précédemment. Pourquoi devrais-je utiliser Vue.js ?

a. Les produits doivent absolument être modifiés à plusieurs reprises

b Les modifications peuvent entraîner des changements dans l'association et le niveau d'imbrication du DOM, ce qui modifiera le code associé. à la structure jquery. est extrêmement complexe

c et vue.js peuvent résoudre ce problème

Vous souvenez-vous encore que lorsque vous avez écrit JQuery pour la première fois, vous avez écrit ('#xxx').parent ().parent Qu'en est-il du code comme ().parent() ? Quand vous écrivez pour la première fois, vous sentez qu'il n'y a pas beaucoup d'éléments sur la page, alors n'avez-vous pas simplement besoin de trouver le père du père de cet élément, autant écrire le père du père de cet élément ? clairement dans les commentaires. Mais si dans quelques jours votre chef d'équipe projet ou votre chef de produit demande soudainement des modifications à la page web que vous avez créée, cette demande de modification affectera la structure de la page, c'est-à-dire que l'association et le niveau d'imbrication du DOM changeront alors. ('#xxx').parent().parent().parent() peut devenir $('#xxx').parent().parent().parent().parent().parent( ).

Ce n'est rien. À l'avenir, les itérations de produits deviendront de plus en plus rapides, il y aura de plus en plus de modifications, et il y aura plus d'un élément DOM similaire associé et imbriqué sur la page, puis des modifications seront effectuées. être très laborieux. De plus, la recherche des éléments de page par le sélecteur JQuery et le fonctionnement du DOM lui-même entraînent également des pertes de performances. Lorsque vient le temps d'ouvrir cette page, elle peut devenir de plus en plus bloquée, mais vous n'avez aucun moyen de démarrer.

Si vous avez appris Vue.js à ce moment-là, ces plaintes n'existeront plus.

5. Quelle est la couche de vue souvent mentionnée dans le front-end ?

Nous pouvons diviser le DOM en HTML en une couche indépendamment des autres parties. Cette couche est appelée couche de vue.

La bibliothèque principale de Vue se concentre uniquement sur la couche de vue

6 Quel est le processus d'utilisation de jquery pour développer une page complète ?

a. framework d'écriture HTML

b. décoration CSS

c. Je dois parler des opérations JavaScript DOM. Si vous utilisez JQuery pour développer un Zhihu, vous devez alors utiliser diverses méthodes d'opération DOM dans JQuery pour exploiter la structure DOM du HTML.

Maintenant, nous faisons abstraction d'une application de page Web, alors le DOM en HTML est en fait une vue. Une page Web forme la structure de vue la plus basique grâce à la combinaison et à l'imbrication du DOM, puis via la modification CSS, en vue de base. les structures sont « maquillées » pour les rendre plus belles. Enfin, en ce qui concerne la partie interactive, vous devez utiliser JavaScript pour accepter la demande interactive de l'utilisateur, répondre à l'opération interactive de l'utilisateur via le mécanisme d'événement et modifier diverses données dans la fonction de traitement d'événement, comme la modification d'un certain DOM. partie innerHTML ou innerText.

7. Pourquoi Vue.js rend-il si pratique le développement d'applications frontales basées sur le Web ? a, déclaratif

b, liaison de données réactive

c, développement basé sur des composants

d , DOM virtuel

Parce que Vue.js propose une liaison de données déclarative et réactive et un développement basé sur des composants, et qu'il utilise également Virtual DOM, une technologie qui semble sophistiquée rien que par son nom.

8. Quelle est la liaison de données dynamique souvent mentionnée dans vue.js ?

C'est-à-dire que vue.js répondra automatiquement aux changements de données et modifiera toutes les données et affichera le contenu lié entre eux selon les relations de liaison pré-écrites par l'utilisateur dans le code. Cette relation de liaison est déclarée par l'attribut v-model de la balise d'entrée dans la figure, vous pouvez donc voir quelqu'un appeler grossièrement vue.js un moteur de modèle de rendu déclaratif ailleurs.

9. Pourquoi le développement de composants est-il nécessaire dans le front-end ?

a. Le code de développement sans composants et la charge de travail sont très importants

b Ce serait pire de modifier que la mort

Mais maintenant nous le sommes. faire une seule page Les applications, les interactions et les structures de page sont très complexes. De nombreux modules doivent être écrits sur une page, et souvent la quantité de code et la charge de travail pour un module sont très importantes s'il est développé selon la méthode d'origine. , ce sera fatiguant. De plus, lorsque les exigences du produit changeront à l'avenir, il sera très difficile de le modifier. Je crains qu'après le déplacement de l'un des div, d'autres div suivront et la page entière sera gâchée, ou certains événements internes du DOM le seront. modifié en raison du mécanisme de bouillonnement d'événements de JavaScript. Après le traitement de la fonction, divers bugs inexplicables et étranges apparaissent.

10. Comment réaliser le développement de composants en front-end ?

a. Emprunter des idées modulaires orientées objet back-end (diviser certaines grandes fonctions en plusieurs fonctions, puis les attribuer à différentes personnes pour le développement)

b. Pour diviser les différents modules d'une application d'une seule page en composants distincts (composants), il suffit d'écrire d'abord diverses balises de composant dans l'application parent (occupant des fosses), et dans les balises du composant d'écrire les paramètres à transmettre dans le composant. (tout comme passer des paramètres dans une fonction, ce paramètre est appelé l'attribut du composant), puis écrire l'implémentation des différents composants séparément (remplir le trou)

En programmation orientée objet, on peut utiliser la pensée orientée objet pour regrouper divers modules en classes ou diviser un grand module métier en classes plus nombreuses et plus petites. Dans la programmation orientée processus, nous pouvons également diviser certaines fonctions volumineuses en plusieurs fonctions, puis les attribuer à différentes personnes pour le développement.

Dans les applications front-end, peut-on également encapsuler des modules comme la programmation ? Cela introduit l'idée de développement de composants.

Vue.js divise divers modules dans une application d'une seule page en composants distincts via des composants. Il nous suffit d'écrire d'abord diverses balises de composants dans l'application parent ((occuper la fosse) et d'écrire les paramètres à définir. passé dans le composant dans la balise du composant (tout comme passer des paramètres à la fonction, ce paramètre est appelé l'attribut du composant), puis écrire l'implémentation des différents composants séparément (remplir la fosse), puis toute l'application est terminée .

11. Pourquoi existe-t-il la technologie Virtual DOM ?

a. Problème

De nos jours, la vitesse d'Internet est de plus en plus rapide. De nombreuses personnes possèdent des dizaines, voire des centaines de fibres optiques M dans leur maison et leurs téléphones portables. J'ai également commencé à utiliser la 4G, il va de soi qu'une page Web ne fait que quelques centaines de Ko et que le navigateur lui-même mettra en cache de nombreux fichiers de ressources, alors pourquoi est-il toujours très lent d'ouvrir une page qui a été ouverte et. mis en cache auparavant avec des dizaines de fibres M ?

b.Raisons

(1) Le navigateur lui-même présente des goulots d'étranglement en termes de performances lors du traitement du DOM

(2) Utilisez JQuery ou les fonctions d'opération natives du DOM JavaScript pour manipuler le DOM lors d'exécutions fréquentes. opérations, le navigateur doit constamment restituer de nouvelles arborescences DOM

En effet, le navigateur lui-même présente des goulots d'étranglement en termes de performances dans le traitement du DOM, en particulier dans le développement traditionnel, en utilisant JQuery ou JavaScript natif Lorsque la fonction d'opération DOM effectue des opérations fréquentes sur le DOM , le navigateur doit continuellement afficher de nouvelles arborescences DOM, ce qui rend la page très bloquée.

12. Comment implémenter le DOM Virtuel ?

a. Précalculer diverses opérations de dom et restituer le dernier résultat (réduire le nombre de rendus dom)

Et Virtual DOM est un DOM virtuel En anglais, pour mettre c'est simplement une méthode qui peut effectuer divers calculs via JavaScript à l'avance pour calculer et optimiser l'opération DOM finale. Puisque cette opération DOM est une opération de prétraitement et n'exploite pas réellement le DOM, elle est appelée DOM virtuel. Enfin, l'opération DOM est effectivement soumise une fois le calcul terminé, et les modifications de l'opération DOM sont reflétées dans l'arborescence DOM.

13. Comment utiliser Vue.js pour le développement d'applications monopage ?

En fait, vous pouvez simplement regarder la vidéo d'apprentissage et commencer à le faire, cela devrait être le meilleur

a Introduction - lisez la partie de base de la vue officielle. Document .js

Ma suggestion est de lire d'abord la partie de base du document officiel introduction-vue.js. À l'exception de la section sur les composants, qui implique de nombreux termes obscurs, les chapitres précédents utilisent simplement Vue.js comme moteur de modèles.

b. Utilisation de base d'ECMAScript6, Webpack, NPM et Vue-Cli. Il est préférable d'avoir une certaine compréhension de Node.js

Ensuite, commencez à apprendre ECMAScript6, Webpack, NPM et Vue-Cli. Pour une utilisation de base, il est préférable d’avoir une certaine compréhension de Node.js.

c. Regardez diverses vidéos et articles pratiques sur Internet et le code open source d'autres personnes

À la fin, examinons d'abord la partie composant. Après avoir compris les concepts des composants, nous avons commencé à regarder diverses vidéos et articles pratiques sur Internet, ainsi que le code source open source d'autres personnes.

14. Qu'est-ce qu'ECMAScript ?

La relation entre ECMAScript et JavaScript est que le premier est une spécification du second, et le second est une implémentation du premier (d'autres dialectes ECMAScript incluent Jscript et ActionScript). Dans les situations quotidiennes, ces deux mots sont interchangeables.

ECMAScript6 est une nouvelle génération de langage JavaScript.

15. Qu'est-ce que Webpack ?

a. Outil de packaging front-end

Webpack est un outil de packaging et de construction front-end. Si vous avez déjà écrit du HTML, du CSS et du JavaScript à la main, introduit du CSS dans votre fichier HTML via la balise link et introduit des scripts JS externes via l'attribut src de la balise Script, alors vous ne vous sentirez certainement pas familier avec cet outil. . Cela n'a pas d'importance, comprenons d'abord pourquoi nous devrions utiliser Webpack, puis étudions simplement les raisons.

16. Pourquoi utiliser Webpack ?

a. Gestion pratique de divers matériaux

b Emballage pour réduire le nombre de visites du navigateur

Comme mentionné précédemment, créez une seule page. application Le programme lui-même est assez complexe et il utilisera certainement beaucoup de matériel et d'autres bibliothèques tierces pour le faire. Comment devrions-nous gérer ces choses ?

Comme mentionné précédemment, Webpack est un outil de packaging front-end. Pourquoi le code front-end devrait-il être packager ? Étant donné que de nombreux éléments sont utilisés dans les applications à page unique, si chaque élément est introduit via l'attribut src ou un lien en HTML, alors lors de la demande d'une page, le navigateur peut devoir lancer plus de dix requêtes, les demandant souvent. Les ressources sont tous les codes de script ou petites images. Ces ressources elles-mêmes ne font que quelques kilo-octets, et le téléchargement ne prend même pas 1 seconde. Cependant, comme HTTP est un protocole de couche application, sa couche inférieure est TCP, le protocole de couche transport, et celui de TCP. poignée de main et vague. Le processus peut prendre plus de temps que le téléchargement de la ressource elle-même, donc tous ces petits fichiers doivent être regroupés dans un seul fichier, de cette façon, plusieurs ressources peuvent être téléchargées en un seul processus de poignée de main et de vague TCP, et plusieurs ressources sont. téléchargés grâce à Ils partagent tous une requête HTTP, de sorte que la tête et d'autres parties sont également partagées, ce qui équivaut à former un effet d'échelle, ce qui rend l'affichage de la page Web plus rapide et l'expérience utilisateur meilleure.

17. Que sont NPM et Node.js ? Quelle est leur relation ?

a. Node.js est un environnement d'exécution JavaScript côté serveur

Node.js est un environnement d'exécution JavaScript côté serveur qui peut être utilisé pour. écrire un programme indépendant JavaScript.

b. Node.js peut écrire des programmes indépendants (Webpack est écrit par Node.js)

Comme nous l'avons mentionné précédemment, Webpack est écrit par Node.js, donc en tant que développement front-end , Même si vous n'utilisez pas Node.js pour écrire des programmes indépendants, vous avez toujours besoin d'un environnement d'exécution Node.js. Après tout, de nombreux outils frontaux sont écrits en l'utilisant.

c. NPM est un gestionnaire de packages node.js (similaire à Maven de Java (gestion des dépendances des packages), et PHP en a un similaire).

NPM est un gestionnaire de packages node.js. Lorsque nous étions en développement traditionnel, la plupart des JQuery.js étaient recherchés sur Baidu, puis téléchargés à partir du site officiel, ou directement introduits dans les ressources CDN. Cette méthode est trop gênante. Si nous rencontrons d'autres packages dans le futur, le code de ce package peut lui-même appeler d'autres packages (on dit aussi que ce package a des dépendances sur plusieurs autres packages), alors nous devons introduire un package dans notre projet qui deviendra It was très difficile. Maintenant que nous avons le gestionnaire de packages NPM, nous pouvons l'introduire directement via

npm install xxx包名称

, par exemple,

npm install vue

18. Qu'est-ce que Vue-CLi ?

C'est un outil d'échafaudage pour vue.js. Pour parler franchement, c'est un outil qui vous aide automatiquement à générer le répertoire du projet, à configurer Webpack et divers packages dépendants. Il peut être installé via

npm install vue-cli -g

Le -g suivant signifie installation globale, ce qui signifie Vous. peut l'appeler directement via la commande vue après avoir ouvert la ligne de commande.

19. Que sont Vuex et Vue-route

Vuex est un gestionnaire d'état pour vue. Utilisé pour gérer de manière centralisée divers états dans une application d’une seule page.

Vue-route est un routeur frontal pour vue. Ce routeur n'est pas le routeur que nous utilisons pour accéder à Internet, mais un élément qui gère la relation de mappage entre les entrées de requête et les pages. Il peut remplacer des parties de la page sans actualiser, donnant ainsi l'impression aux utilisateurs d'être passés à une page Web.

Pour expliquer clairement ces deux choses, cela prendra beaucoup de place, je vais donc le mentionner brièvement ici. Le plus important est d'abord d'apprendre vue.js lui-même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!