Qu'est-ce que le framework Vue.js ?

Dans l'article précédent, nous avons partagé avec vous l'installation simple et le démarrage rapide de Vue.js. Dans cet article, nous partageons principalement avec vous ce qu'est le framework Vue.js et pourquoi devriez-vous le choisir ? Cet article présente les tendances actuelles dans l'utilisation de la technologie front-end, ainsi que les avantages et les scénarios applicables de Vue.js. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Vue.js est un framework progressif pour la création d'interfaces Web basées sur les données. L'objectif de Vue.js est de permettre une liaison de données réactive et des composants de vue composés avec l'API la plus simple possible. Non seulement il est facile de démarrer, mais il est également facile de l'intégrer à des bibliothèques tierces ou à des projets existants.

La série "Vernaculaire, Programmation" est de retour Dans cette série, nous apprendrons ensemble les bases de Vue.js. Vous avez bien lu, connaissances de base. Par conséquent, même si vous êtes dans l’industrie depuis peu de temps, je pense que vous pouvez l’apprendre dans le style vernaculaire.

Mais j'espère toujours que vous avez une expérience de projet dans le développement de HTML, CSS et Javascript. Si vous n'avez aucune expérience de projet ou si vous maîtrisez déjà les connaissances de Vue.js, alors cette série n'est pas. adapté à votre situation d’apprentissage actuelle.

1 Objectifs d'apprentissage

Grâce à cette section, vous apprendrez :

Tendances actuelles dans l'utilisation de la technologie front-end

2. Qu'est-ce que MVVM

3 Avantages de Vue.js

4 Les deux cœurs de Vue.js

5.

2 Contexte de naissance

Ces dernières années, grâce à la popularité et à l'amélioration des performances des appareils de téléphonie mobile, la demande de Web sur les terminaux mobiles a considérablement augmenté, ce qui a entraîné dans quelque chose appelé webapp, c'est-à-dire des applications Web mobiles.

Leurs fonctions deviennent de plus en plus complexes, les interactions deviennent de plus en plus cool et les fonctions et effets se rapprochent de plus en plus de l'APP native. Par exemple, ce qui suit :

(L'effet est presque aussi bon que l'application native)

Ce type de webapp n'est pas seulement comme h5 marketing. Les pages Web ont également des effets intéressants, et elles ont également des interactions complexes telles que des clics, des entrées, des sélections déroulantes et des changements de vue. Face à de tels besoins commerciaux, nous utilisons toujours la solution de développement côté PC, ce qui sera inévitablement inapproprié. Par exemple : changement de vue.

Côté PC, lors du changement de vue, nous utiliserons la balise pour accéder à la page, mais si c'est du côté mobile, c'est une évidence, vous rencontrerez un écran. comme ceci :

(Attendez que les fleurs fanent)

A ce moment, l'utilisateur ne peut qu'attendre... 3 secondes, 5 secondes, 8 secondes ... Il est difficile d'imaginer que dans une application Web qui doit changer fréquemment de vue, l'utilisation de la balise est très peu conviviale pour les utilisateurs. Si c'était vous, vous ne seriez pas prêt à attendre aussi longtemps. ne serait pas disposé....

De plus, lors de la réception des entrées de l'utilisateur, il est probable que la vue soit mise à jour à temps. Par exemple, si l'utilisateur saisit un contenu différent, la page sera mise à jour en conséquence. . Si différentes options sont cliquées, différents contenus seront affichés. Statut et autres effets interactifs. Une fois qu’il y a trop d’interactions comme celle-ci et que vous devez le faire manuellement, le code deviendra facilement complexe et difficile à maintenir.

Afin de résoudre les lacunes d'expérience et de développement d'applications Web, nous avons décidé d'apprendre et d'utiliser un framework MVVM - Vue.js

3 Qu'est-ce que MVVM

MVVM peut être divisé en trois parties : View --- ViewModel --- Model Regardez la vue ci-dessous :

Alors, comment comprenons-nous MVVM. ?

Dans l'image ci-dessus, la Vue de gauche est équivalente à notre contenu DOM, la page vue que nous voyons, et le Modèle de droite est équivalent à notre objet de données, comme les informations d'un objet :

{ 

name:"张三", 
age:21,

}

Le moniteur au milieu est chargé de surveiller les données des deux côtés et d'avertir l'autre côté d'apporter des modifications en conséquence. Par exemple : si vous modifiez la valeur du nom dans le calque Modèle en : "李思", alors le "Zhang San" affiché dans le calque Vue deviendra automatiquement "李思", et ce processus est géré par ViewModel You. vous n'avez pas besoin d'écrire manuellement du code pour l'implémenter (vous n'avez plus besoin de manipuler manuellement le DOM).

Si vous avez écrit des opérations DOM complexes, vous pouvez ressentir la commodité que cela apporte.

Il s'agit du framework MVVM En plus de Vue.js, les frameworks JS appartenant à MVVM incluent également React.js et Angular.js.

Ici, nous n'analyserons pas lequel des trois frameworks est le meilleur. Concernant la sélection technologique, chaque équipe de développement a une situation différente et prend en compte différents facteurs. Tant que cela vous convient, tout ira bien. Nous ne parlons ici que des avantages de Vue.js :

1. Vue.js est plus léger et plus rapide

2.

4 Le cœur de Vue

Après tant de préparation, nous arrivons enfin au cœur de Vue.

Ensuite, faisons connaissance avec Vue.js. Voici un extrait de l'introduction du site officiel :

La liaison et la combinaison des données de réponse sont obtenues via l'API la plus simple possible. Le composant view de

a deux mots-clés : liaison de données et Afficher les composants.

Pilote de données de Vue : Les modifications de données entraînent la mise à jour automatique de la vue. Traditionnellement, vous devez modifier manuellement le DOM pour modifier la vue. Il suffit de modifier les données et ce sera le cas. changer automatiquement la vue. Un mot : cool. Vous n'avez plus à vous soucier des mises à jour du DOM. C'est la concrétisation de l'idée MVVM.

Affichage des composants : Divisez la page Web entière en blocs, et chaque bloc peut être considéré comme un composant. Une page Web est composée de plusieurs composants assemblés ou imbriqués. Regardez l'image ci-dessous :

Plus précisément, comment implémenter un composant pendant le processus de développement, et quels blocs peuvent être divisés en composants. Nous les présenterons un par un dans le. chapitres suivants. Ici, il vous suffit de savoir que dans Vue.js, une page Web peut être considérée comme composée de plusieurs composants.

5 scénarios applicables

Si vous utilisez toujours jquery pour utiliser fréquemment votre DOM afin de mettre à jour la page, vous pouvez utiliser Vue.js pour libérer votre DOM exploité.

S'il y a plusieurs parties de votre projet qui sont identiques et peuvent être encapsulées dans un composant, vous pouvez essayer d'utiliser Vue.js.

De plus, l'implémentation principale de Vue.js utilise la fonctionnalité Object.defineProperty d'ES5, qui est incompatible avec les navigateurs d'IE8 et inférieurs. Par conséquent, votre projet doit être compatible avec ces versions inférieures des navigateurs. , alors Vue.js n'est pas applicable.

Après tout, le but de développer un projet n'est pas d'utiliser un certain framework.

6 Résumé de cette section

Afin de mieux répondre aux besoins de développement des projets d'applications Web mobiles actuels, le framework MVVM est né, et Vue.js est un tel js framework, ses deux cœurs : axé sur les données et la modularisation.

Recommandations associées :

Le framework Vue.js implémente un système de requête de billets de train

objet d'instance vue.js et arborescence de composants Explication détaillée des exemples

Partage d'exemples de communication de composants Vue.js

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!