Créez des interfaces utilisateur frontales puissantes mais simples à l'aide de Vue et Bulma-tutoriel CSS-php.cn

Créez des interfaces utilisateur frontales puissantes mais simples à l'aide de Vue et Bulma

WBOY

Libérer： 2023-12-27 09:44:43

original

1115 Les gens l'ont consulté

Créez des interfaces utilisateur frontales puissantes mais simples à laide de Vue et Bulma

Avec le développement rapide d'Internet et des applications mobiles, l'importance du développement front-end est de plus en plus valorisée par les gens. Afin d'obtenir la beauté et la fonctionnalité des pages Web, les développeurs continuent d'explorer de nouveaux outils et frameworks. Dans cet article, je vais vous présenter comment combiner Vue et Bulma pour créer une conception frontale simple et puissante.

Vue est un framework progressif pour la création d'interfaces utilisateur. Il est facile à apprendre et à utiliser, tout en offrant des performances et une flexibilité élevées. Il offre une bonne réutilisabilité du code grâce à la composantisation, permettant aux développeurs de développer et de maintenir le code plus efficacement.

Bulma est un framework CSS moderne basé sur Flexbox. Il fournit un grand nombre de styles et de composants, notamment des systèmes de grille, des boutons, des formulaires, une navigation, etc. La conception de Bulma est simple et puissante, permettant aux développeurs de créer rapidement de belles interfaces.

Tout d'abord, nous devons installer Vue et Bulma. Exécutez la commande suivante dans la ligne de commande :

npm install vue
npm install bulma

Copier après la connexion

Une fois l'installation terminée, nous pouvons commencer à écrire du code. Tout d’abord, nous devons créer une instance Vue et importer le fichier de style de Bulma. Ajoutez le code suivant dans le fichier HTML :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/bulma/css/bulma.min.css">
</head>
<body>
  <div id="app">
    <!-- 在这里写你的Vue组件 -->
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app = new Vue({
      el: '#app',
      // 在这里写你的Vue组件
    });
  </script>
</body>
</html>

Copier après la connexion

Ensuite, nous pouvons commencer à écrire des composants Vue. Dans l'instance Vue, nous pouvons définir un objet de données via l'attribut data pour stocker nos données.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
});

Copier après la connexion

Maintenant, dans notre fichier HTML, nous pouvons utiliser {{ message }} pour afficher les données. Par exemple : {{ message }}来显示数据了。例如：

<div id="app">
  <p>{{ message }}</p>
</div>

Copier après la connexion

接下来，我们可以开始使用Bulma的组件来美化我们的界面。在Vue组件中，我们可以使用Bulma的类来设置样式。例如，我们可以使用button类来创建一个按钮：

<button class="button is-primary">Click Me</button>

Copier après la connexion

甚至，我们可以结合Vue的数据绑定来动态改变按钮的样式：

<button class="button" :class="{'is-primary': isActive, 'is-danger': !isActive}" @click="toggleButton">
  {{ buttonMessage }}
</button>

Copier après la connexion

var app = new Vue({
  el: '#app',
  data: {
    isActive: false,
    buttonMessage: 'Click Me'
  },
  methods: {
    toggleButton: function() {
      this.isActive = !this.isActive;
      this.buttonMessage = this.isActive ? 'Active' : 'Inactive';
    }
  }
});

Copier après la connexion

上面的代码中，我们使用:class来绑定样式类，@click来绑定点击事件。当按钮被点击时，会触发toggleButtonrrreee

Ensuite, nous pouvons commencer à utiliser les composants de Bulma pour embellir notre interface. Dans les composants Vue, nous pouvons utiliser les classes de Bulma pour définir des styles. Par exemple, nous pouvons utiliser la classe button pour créer un bouton :

rrreee

Même, nous pouvons combiner la liaison de données de Vue pour changer dynamiquement le style du bouton :

rrreeerrreee

Dans le code ci-dessus, nous utilisez :class pour lier la classe de style, @click pour lier l'événement click. Lorsque vous cliquez sur le bouton, la méthode toggleButton sera déclenchée, modifiant ainsi le style et le texte du bouton. 🎜🎜En plus des boutons, Bulma fournit également une multitude d'autres composants, tels que des formulaires, la navigation, des systèmes de grille, etc. Les développeurs peuvent choisir et utiliser ces composants en fonction de leurs besoins. 🎜🎜Pour résumer, combiner Vue et Bulma peut créer un design front-end simple et puissant. Vue fournit de bons mécanismes de composantisation et de liaison de données, tandis que Bulma fournit des styles et des composants riches. Les développeurs peuvent rapidement créer des interfaces frontales magnifiques et riches en fonctionnalités grâce à ces deux frameworks. J'espère que cet article vous sera utile et je vous souhaite plus de succès dans votre développement front-end ! 🎜

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!