Différence : vuejs est un framework JavaScript progressif pour la création d'interfaces utilisateur. Son objectif est d'obtenir une liaison de données réactive et des composants de vue composables via l'API la plus simple possible, tandis que Bulma est un CSS moderne basé sur Flexbox Framework pour implémenter divers réactifs simples ou répliqués ; dispositions de contenu.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
Qu'est-ce que vuejs ?
Vue.js (prononcé /vju:/, prononcé comme 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 à des projets existants. Vue 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.
Vue.js fournit également une liaison de données MVVM et un système de composants composables avec une API simple et flexible. Son objectif est d'obtenir une liaison de données réactive et des composants de vue composables via l'API la plus simple possible.
On peut aussi dire que Vue.js est un système réactif (Reactivity System). La couche de modèle de données (Model) n'est qu'un objet JavaScript ordinaire. Comme le montre la figure ci-dessous, { } représente un objet JavaScript qui met à jour le fragment HTML (DOM) correspondant. Ces fragments HTML sont également appelés « vues ». Cela rendra la gestion de l'état très simple et intuitive, et pourra réaliser une liaison bidirectionnelle des données, c'est pourquoi nous l'appelons également un système réactif.
Les principales fonctionnalités de Vue.js
Vue.js est une excellente bibliothèque JavaScript pour le développement d'interfaces frontales. La raison pour laquelle elle est très populaire est qu'elle possède de nombreuses fonctionnalités exceptionnelles. comme suit.
1) Un framework léger
Vue.js peut suivre automatiquement les expressions de modèles dépendantes et les propriétés calculées, fournit une liaison de données MVVM et un système de composants composables, et dispose d'une API simple et flexible pour faciliter la tâche des lecteurs. Comprendre et démarrer plus rapidement .
2) Liaison de données bidirectionnelle
Le rendu déclaratif est l'incarnation principale de la liaison de données bidirectionnelle et est également le cœur de Vue.js. Il permet d'intégrer le rendu déclaratif des données dans le DOM à l'aide d'une syntaxe de modèle concise.
3) Commandes
Vue.js interagit avec la page, principalement via des commandes intégrées. La fonction de la commande est d'appliquer certains comportements au DOM en conséquence lorsque la valeur de son expression change.
4) Componentisation
Component (Component) est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable.
Dans Vue, les composants parent-enfant communiquent via des accessoires, une transmission unidirectionnelle du parent à l'enfant. Le composant enfant communique avec le composant parent et informe le composant parent des modifications de données en déclenchant des événements. Cela constitue un modèle de communication père-enfant de base.
Lorsque les composants en cours de développement ont une relation très étroite avec HTML, JavaScript, etc., les composants peuvent être personnalisés en fonction des besoins réels, ce qui rend le développement plus pratique et réduit considérablement la quantité d'écriture de code.
Le composant prend également en charge le rechargement à chaud. Lorsque nous apportons des modifications, la page ne sera pas actualisée, mais le composant lui-même sera rechargé immédiatement, sans affecter l'état actuel de l'ensemble de l'application. CSS prend également en charge le rechargement à chaud.
5) Routage côté client
Vue-router est le plug-in de routage officiel de Vue.js. Il est profondément intégré à Vue.js et est utilisé pour créer des applications d'une seule page. Les applications Vue à page unique sont basées sur le routage et les composants. Le routage est utilisé pour définir les chemins d'accès et cartographier les chemins et les composants. Les pages traditionnelles implémentent le changement de page et les sauts via des hyperliens.
6) Gestion de l'état
La gestion de l'état est en fait un flux de données à sens unique. L'état pilote le rendu de la vue, et l'utilisateur exploite la vue pour générer une action, ce qui provoque le changement de l'état, provoquant ainsi la re-vue. rendre et former un composant séparé.
Qu'est-ce que la bulma ?
Bulma est un framework CSS moderne basé sur Flexbox. L'intention originale de la conception est Mobile First. La conception modulaire peut être facilement utilisée pour implémenter diverses mises en page de contenu réactif simples ou copiées. Le navigateur prend en charge : Prise en charge du navigateur : Chrome, Edge, Firefox, Internet Explorer (10+), Opera et Safari.
bulma a les fonctionnalités suivantes :
Frame CSS moderne et léger, utilisant Flexbox
Prend en charge la mise en page réactive, la grille, etc.
CSS pur, pas de code Javascript
disponible Personnalisé, modulaire
Avantages :
Fournir un design réactif pour les ordinateurs, tablettes et téléphones mobiles
Frame CSS pur, facile à intégrer aux frameworks JavaScript, tels que VueJS, ReactJS, etc.
Code élégant Colonne simple
Exemple d'effet de course
. Ajoutez simplement des colonnes et elles se redimensionneront automatiquement
Tuiles magiques
Un seul élément de la grille CSS Metro UI
Recommandations associées : "Tutoriel 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!