Explication graphique détaillée de Vue.js

Cette fois, je vous apporte une explication détaillée de Vue.js avec des images et du texte. Quelles sont les précautions lors de l'utilisation de Vue.js. Voici des cas pratiques, jetons un coup d'œil.

En tant que l'un des frameworks front-end les plus populaires et les plus prometteurs actuellement, Vue.js fournit un nouveau modèle de pensée qui nous aide à créer et développer rapidement des projets front-end. Cet article vise à aider tout le monde à comprendre Vue.js, à comprendre le processus de développement de Vue.js et à mieux comprendre comment créer un projet frontal de moyenne à grande taille via Vue.js, tout en effectuant le travail de déploiement et d'optimisation correspondant.

L'article sera développé sous forme d'images PPT avec introduction textuelle, et n'impliquera pas le code spécifique des points de connaissance, cliquez simplement ici. Les étudiants intéressés peuvent consulter les documents correspondants pour en savoir plus.

Introduction à Vue.js

D'après l'introduction dans l'image ci-dessus, il n'est pas difficile de trouver que Vue.js est un framework JS frontal basé sur les données. La plus grande différence entre celui-ci et jQuery est que jQuery modifie l'affichage de la page en manipulant le DOM, tandis que Vue réalise la mise à jour et l'affichage de la page en manipulant les données. Voici le modèle conceptuel basé sur les données de Vue :

Vue.js est principalement responsable du cube vert ViewModel dans l'image ci-dessus, qui se trouve entre la couche View (c'est-à-dire Couche DOM) et la couche Modèle (c'est-à-dire la couche logique JS) est liée aux écouteurs DOM et aux Data Bingings via ViewModel, deux choses équivalentes aux écouteurs.

Lorsque la vue de la couche View change, Vue écoutera et modifiera les données de la couche Model via les écouteurs DOM. Au contraire, lorsque les données de la couche Modèle changent, elle écoutera et modifiera également l'affichage de la couche Vue via Data Bingings. Cela implémente une fonction de liaison de données bidirectionnelle, qui est également le principe du lecteur de données Vue.js.

Instance Vue

Dans un fichier html, on peut introduire directement Vue via la balise script. js, puis vous pouvez écrire du code Vue.js dans la page. Dans l'image ci-dessus, nous avons construit une instance Vue via new Vue(). Dans l'instance, elle peut inclure des éléments suspendus (el), des données (data), des modèles (template), des méthodes (méthodes) et un cycle de vie<.>Crochets (créés, etc.) et autres options. Différentes options d'instance ont différentes fonctions, telles que :

(1) el indique quelle zone sous l'élément notre Vue doit fonctionner, et '#demo' signifie faire fonctionner la zone sous l'élément avec l'identifiant de démo.

(2) data représente l'objet de données de l'instance Vue, et les attributs des données peuvent répondre aux modifications des données.
(3) créé indique l'étape du cycle de vie de l'instance où la création est terminée. Une fois l'instance créée, sa méthode sera appelée.

Instructions communes Vue

Dans le développement de projets Vue, celle que nous utilisons le plus devrait être C'est une commande Vue. Grâce aux instructions communes fournies par Vue, nous pouvons utiliser pleinement les puissantes fonctions du lecteur de données de Vue. Ce qui suit est une brève introduction aux instructions couramment utilisées dans l'image :

(1) v-text : utilisé pour mettre à jour le contenu de l'élément lié, similaire à la méthode text() de jQuery

(2 ) v- html : utilisé pour mettre à jour le contenu html dans l'élément lié, similaire à la méthode html() de jQuery
(3) v-if : utilisé pour restituer l'élément en fonction des conditions vraies et fausses de la valeur du expression, si P3 dans l'image ci-dessus est Si faux, la balise P ne sera pas rendue
(4) v-show : utilisé pour afficher les éléments cachés en fonction des conditions vraies et fausses de la valeur de l'expression, et changer l'affichage Attribut CSS de l'élément
(5) v-for : Utiliser Pour parcourir des données pour restituer des éléments ou des modèles, si P6 dans la figure est [1,2,3], 3 balises P seront rendues et le contenu est 1, 2, 3
(6) v-on : utilisé pour les événements de liaison d'éléments, dans l'image, l'événement click de showP3 est lié à la balise P

Pour plus d'instructions Vue, vous pouvez consulter le document Vue2.0, adresse : https://vuefe.cn/api/# Commands

Pile technologique Vue.js

Nous avons mentionné ci-dessus que vous pouvez écrire du code Vue directement dans une page HTML en introduisant Vue.js, mais cette méthode n'est pas couramment utilisée. Parce que si notre projet est relativement volumineux, il y aura de nombreuses pages dans le projet. Une fois que chaque page introduit une instance Vue.js ou déclare une instance Vue, cela est très préjudiciable à la maintenance ultérieure et au partage de code, et il y aura également des conflits de noms d'instance. . situation, nous devons donc utiliser la pile technologique fournie par Vue pour créer un projet frontal puissant.

En plus de Vue.js, nous devons également utiliser :

(1) vue-cli : l'outil d'échafaudage de Vue, utilisé pour générer automatiquement des répertoires et des fichiers pour les projets Vue.
(2) vue-router : l'outil de routage frontal fourni par Vue, à l'aide duquel nous pouvons implémenter le contrôle du routage des pages, l'actualisation partielle et le chargement à la demande, créer une application d'une seule page et réaliser un front-end et séparation back-end.
(3) vuex : L'outil de gestion d'état fourni par Vue est utilisé pour gérer l'interaction et la réutilisation de diverses données dans nos projets, et stocker les objets de données dont nous avons besoin.
(4) ES6 : Une nouvelle version de Javascript, abréviation de ECMAScript6. En utilisant ES6, nous pouvons simplifier notre code JS tout en profitant des fonctionnalités puissantes qu'il offre pour implémenter rapidement la logique JS.
(5) NPM : outil de gestion de packages node.js, utilisé pour gérer uniformément les packages, plug-ins, outils, commandes, etc. nécessaires à nos projets front-end pour faciliter le développement et la maintenance.
(6) webpack : un outil d'empaquetage de fichiers puissant qui peut empaqueter et compresser nos fichiers de projet front-end en js en même temps, et peut réaliser la conversion de syntaxe et le chargement via des chargeurs tels que vue-loader.
(7) Babel : un plug-in qui convertit le code ES6 en code ES5 compatible avec les navigateurs

En utilisant les technologies ci-dessus, nous pouvons commencer à construire notre projet Vue.

Création de grandes applications

Dans la construction de nos projets Vue de taille moyenne et grande, nous présentons principalement comment Utilisez vue-cli pour générer automatiquement le répertoire front-end et les fichiers de notre projet, comprenez le concept selon lequel tout dans Vue est un composant et les problèmes de communication des composants parent-enfant, expliquez comment nous utilisons les plug-ins tiers dans le Projet Vue, et enfin utilisez Webpack pour empaqueter et déployer notre projet.

vue-cli build

Avant d'utiliser vue-cli, nous devons installer node.js et utiliser la commande npm qu'il fournit pour installer vue-cli. Pour installer node.js, il vous suffit de vous rendre sur son site officiel pour télécharger le logiciel et l'installer. L'adresse est : https://nodejs.org/en/

Une fois l'installation terminée, nous. ouvrez l'outil de ligne de commande cmd de l'ordinateur et entrez l'image ci-dessus dans l'ordre Commandes dans :

(1) npm install -g vue-cli : Installer vue-cli globalement
(2) vue init webpack my-project : utilisez vue-cli pour générer un projet basé sur webpack à l'adresse du répertoire Le fichier et le répertoire du projet Vue nommés 'my-project'
(3) cd my-project : ouvrez le dossier que vous venez de créer
(4) npm intall : installez les fichiers du package dont dépend le projet
(5) npm run dev : utilisez le serveur de nœud local pour ouvrir et parcourir la page du projet dans le navigateur

De cette façon , notre répertoire de projet vue basé sur le webpack est construit.

Composant fichier unique

Dans le projet vue qui vient d'être construit, nous trouverons une App .vue et Hello.vue, puis les fichiers se terminant par le suffixe .vue comme celui-ci sont des composants monofichiers courants dans nos projets Vue. Un seul composant de fichier contient le HTML, le js et le CSS d'une fonction ou d'un module. Dans le fichier .vue, nous pouvons écrire du html dans la balise template, du js dans la balise script et du css dans la balise style. Une telle fonction ou module est un composant .vue, qui est également très pratique pour le partage de composants et la maintenance ultérieure.

Communication des composants parent-enfant

Donc comme ça dans le développement de projets avec des composants à fichier unique en tant que noyau, nous penserons certainement à une question, c'est-à-dire comment les composants parents et enfants de vue échangent-ils des données pour établir la communication ? Des accessoires sont fournis dans Vue2.0 pour permettre aux composants parents de transmettre des données aux composants enfants, et $emit est utilisé pour permettre aux composants enfants de transmettre des données aux composants parents. Bien entendu, s'il s'agit d'une interaction de données plus complexe et courante, il est recommandé d'utiliser vuex pour gérer les données de manière uniforme. Pour plus de détails, veuillez consulter : https://vuefe.cn/guide/components.html#Utiliser des accessoires pour transmettre des données

Utilisation du plug-in

Nous présenterons ensuite comment nous utilisons les plug-ins dans les projets vue basés sur Webpack. Il existe deux situations principales :

(1) Utilisation globale

<.>(1) Introduit dans index.html : Cette méthode n'est pas recommandée car il y a un problème avec l'ordre de chargement, et certains plug-ins ne prennent pas en charge cette méthode.

(2) Introduit via le fichier de configuration webpack
 : principalement implémenté via la méthode webpack.ProvidePlugin() de l'élément de configuration du plugin, mais il ne convient qu'aux plug-ins qui prennent en charge la spécification CommonJs et fournir une variable globale, comme dans jQuery $. (3) Introduction via import + Vue.use() : Cette méthode nécessite d'importer le plug-in qui doit être chargé dans le fichier global .vue, puis de l'implémenter via Vue.use('plugin variable name' ), mais cette méthode Seuls les plug-ins qui suivent les spécifications d'écriture du plug-in Vue.js sont pris en charge, comme vue-resourcece.

(2) Utilisation d'un seul fichier

(1) Introduction directe par importation : cette méthode peut être utilisée dans les fichiers .vue qui doivent appeler des plug-ins, mais vous devez faire attention à l'ordre de création des instances, ou il peut également être introduit via require.

(2) importation + enregistrement des composants : Cette méthode est la méthode

d'utilisation du composant Vue Vous pouvez enregistrer et utiliser un sous-composant dans un composant.

Déploiement et optimisation

Après avoir terminé la phase de codage front-end de l'ensemble de Vue projet dont nous avons besoin Les principales façons de déployer et d'optimiser nos fichiers de projet front-end sont les suivantes :

(1) Utilisez le DefinePlugin de webpack pour spécifier l'environnement de production : Grâce à la configuration DefinePlugin dans le plugin, nous pouvons déclarer 'process.env' L'attribut est 'development' (environnement de développement) ou 'production' (environnement de production). Il est très pratique de changer de mode d'environnement en combinant la commande scripts dans le fichier de configuration npm package.json.

(2) Utilisez UglifyJs pour supprimer automatiquement les instructions d'avertissement dans les blocs de code : Généralement utilisé dans le fichier de configuration webpack de l'environnement de production, configuré via le nouveau webpack.optimize.UglifyJsPlugin(), la suppression des instructions d'avertissement peut réduire le fichier volume de taille.

(3) Utiliser le hachage Webpack pour gérer la mise en cache : Lorsque nous devons modifier un fichier publié en ligne, si le nom du fichier recompilé est le même que la version précédente, le navigateur ne le reconnaîtra pas et chargera le fichier mis en cache . problème. De cette façon, nous devons générer automatiquement des noms de fichiers avec des valeurs de hachage pour empêcher la mise en cache. Pour plus de détails, voir : https://segmentfault.com/a/1190000006178770#articleHeader7

(4) Utilisez v-if pour réduire le chargement inutile de composants : L'instruction v-if est en fait très utile, elle peut faire les composants de notre projet qui ne sont pas nécessaires temporairement ne seront pas rendus et le seront lorsqu'ils seront nécessaires, comme un composant de fenêtre contextuelle, etc. De cette façon, nous pouvons réduire le temps de chargement de la première page et la taille du fichier.

En plus des optimisations ci-dessus, il existe de nombreuses options d'optimisation. Les enfants intéressés peuvent consulter attentivement la documentation de l'API de webpack. Après tout, webpack est très puissant.

Exemple basé sur les données##

Résumé

Cet article est joint avec des images PPT La forme d'introduction textuelle présente brièvement les points de connaissance et le processus de développement de Vue.js, et passe en revue les concepts d'

automatisation frontale, de composantisation et d'ingénierie, et explique le « simple » de Vue.js. mais pourtant complexe" du superficiel au profond. Le charme unique de "L'élégance sans perdre l'élégance, la compacité sans être trop sophistiquée"

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez payer attention aux autres articles connexes sur le site PHP chinois !

Lecture connexe :

Utilisation de Video.js pour implémenter l'interface de diffusion en direct H5

Explication détaillée du module de chemin de node.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!