Comment construire une vue

Vue est un framework frontal populaire qui fournit une multitude d'outils et de ressources pour aider les développeurs à créer des applications d'une seule page. Dans cet article, nous aborderons les bases de la création et de l'utilisation de Vue.

Installation et configuration de Vue :

1. Avant de démarrer la version de Vue, vous devez installer Node.js sur votre machine locale, qui fournit un outil de ligne de commande simple pour gérer diverses dépendances et tâches de développement.

2. Installer Vue.js
   Vous pouvez installer Vue.js sur votre machine locale via la commande suivante :

   npm install vue

3. À propos de Vue-cli
   Vue-cli est un outil d'échafaudage officiellement fourni par Vue.js pour créer de grands projets , qui fournit un outil de génération d'échafaudage rapide et sans configuration pour permettre aux développeurs de créer rapidement des projets Vue. La commande d'installation est la suivante :

   npm install -g @vue/cli

Utilisation de base de Vue :

1. Instance Vue
   L'unité la plus basique de la construction de Vue est l'instance Vue, qui est le cœur de Vue et encapsule le module logique de base.

Ce qui suit est une simple instance de Vue liée à un élément DOM avec l'identifiant de l'application. Les directives de

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

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

2. Directives
   Vue sont des attributs spéciaux spécifiés avec le préfixe v- sur les balises HTML qui sont utilisées pour lier des expressions à des éléments HTML spécifiés.

Voici un cas simple utilisant v-if pour passer à différents paragraphes de texte :

<div id="app">
  <p v-if="seen">你看到了我！</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

3. Composants
   Dans Vue, un composant est une abstraction qui peut être considérée comme un élément personnalisé.

Voici un composant simple pour afficher un message :

Vue.component('message', {
  props: ['text'],
  template: '<div>{{ text }}</div>'
})

var app = new Vue({
  el: '#app',
  data: {
    message: '你好呀！'
  }
})

<div id="app">
  <message :text="message"></message>
</div>

4. Routing
   Dans Vue, le routage est traité comme un composant distinct, qui peut être utilisé pour compléter la navigation entre les pages.

Ce qui suit est un exemple de routage simple :

var Foo = { template: '<div>我是Foo！</div>' }
var Bar = { template: '<div>我是Bar！</div>' }

var router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

var app = new Vue({
  router
}).$mount('#app')

<div id="app">
  <router-view></router-view>
</div>

Résumé :

Cet article présente la construction et l'utilisation de base de Vue, y compris l'installation et la configuration, les instances, les instructions, les composants et le routage. Vue fournit une multitude de fonctions et d'outils qui peuvent facilement effectuer des tâches de développement front-end. Si vous n'avez pas encore utilisé Vue, vous pouvez l'essayer.

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!