Comment utiliser Vue pour créer un système de base

Avec le développement rapide de la technologie front-end, Vue.js est devenu un framework Javascript largement utilisé dans l'industrie. Il peut être utilisé pour créer des applications Web complexes d’une seule page. Cet article explique comment utiliser Vue pour créer un système de base.

1. Pour commencer

Tout d'abord, nous devons installer Vue localement. Vous pouvez télécharger directement la bibliothèque officielle Vue.js, ou utiliser npm pour l'installer comme suit :

npm install vue

Introduisez la bibliothèque Vue.js dans la page HTML :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vous pouvez rapidement créer un nouveau projet via Vue CLI (commande interface de ligne). Ici, nous utilisons Vue CLI 3 pour créer un nouveau projet.

npm install -g @vue/cli
vue create my-project

Il y aura une série d'options de configuration que vous devrez remplir. Après avoir sélectionné, vous pouvez créer un nouveau projet Vue.

2. Créer des composants

Vue adopte le mode MVVM, c'est-à-dire que la couche de vue et la couche de données sont séparées. Grâce à Vue.js, nous pouvons créer rapidement des composants, et un composant équivaut à un conteneur de données.

Créer un composant est très simple. Il vous suffit d'enregistrer un composant dans l'instance Vue et de déclarer ses données et méthodes requises. Voici un exemple simple de création d'un composant :

<div id="app">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

new Vue({ el: '#app' })

Dans le code ci-dessus, nous avons enregistré un composant nommé "my-component" dans l'instance Vue via la méthode Vue.component. Ses données proviennent de l'attribut message de la méthode data. Vue.component 方法注册了一个名为“my-component”的组件。它的数据来源于 data 方法中的 message 属性。

最后，在 Vue 实例中将 my-component 组件挂载到指定的 HTML 元素上。

3. 组件通信

在 Vue 中，组件间通信是比较常见的需求，下面说明一下组件之间的通信方式。

3.1 Props

Props 是一种将数据传递给子组件的方式。它允许父组件通过属性绑定传递数据给子组件。

父组件模板中：

<template>
  <child-component :message="messageFromParent"></child-component>
</template>
<script>
export default {
  data() {
    return {
      messageFromParent: 'parent message'
    }
  }
}
</script>

子组件模板中：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

在上述代码中，我们在父组件 template 标签中创建了一个名为“child-component”的子组件，并使用 :message 属性传递了一个名为 messageFromParent 的字符串。

子组件的 props 是一个对象，用来定义当前组件可以接收的属性及其类型。在这个例子中，子组件只用了一个 message 属性，它的类型是 String。

3.2 Event

Event 是一种允许子组件向父组件通信的方式。它允许子组件通过事件通知父组件发生了某些事情。

子组件模板中：

<template>
  <div @click="onChildClick">click me</div>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      this.$emit('child-click')
    }
  }
}
</script>

父组件模板中：

<template>
  <child-component @child-click="onChildClick"></child-component>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      console.log('child clicked')
    }
  }
}
</script>

在上面的代码中，子组件中的 @click 监听了一个点击事件，并通过 $emit 方法向父组件发射了一个名为“child-click”的事件。

父组件中的 <child-component> 使用了 @child-click 来监听该事件，并在“onChildClick”方法被触发时，控制台将输出“child clicked”。

4. 路由

在 Vue 中，路由是一个重要的概念。它允许我们根据不同的 URL 跳转到不同的页面。Vue 框架中使用的是 Vue Router 来实现路由功能。

首先需要在项目中安装 Vue Router：

npm install vue-router --save

在 router.js 文件中创建一个路由组件：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

使用 Vue.use 来安装 Vue Router，然后定义了两个路由，分别为主页和关于页面，并通过 component

Enfin, montez le composant my-component sur l'élément HTML spécifié dans l'instance Vue.

3. Communication des composants

Dans Vue, la communication entre les composants est une exigence courante. Ce qui suit explique les méthodes de communication entre les composants.

3.1 Accessoires

Les accessoires sont un moyen de transmettre des données aux composants enfants. Il permet aux composants parents de transmettre des données aux composants enfants via une liaison de propriété. 🎜🎜Dans le modèle de composant parent : 🎜

import Vue from 'vue'
import router from './router'
import App from './App.vue'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

🎜Dans le modèle de composant enfant : 🎜rrreee🎜Dans le code ci-dessus, nous avons créé un composant enfant nommé "child-component" dans la balise template du composant parent, et a transmis une chaîne nommée messageFromParent en utilisant l'attribut :message. 🎜🎜Les props d'un sous-composant sont un objet utilisé pour définir les propriétés et les types que le composant actuel peut recevoir. Dans cet exemple, le composant enfant utilise un seul attribut message et son type est String. 🎜

3.2 Événement

🎜L'événement est un moyen de permettre aux composants enfants de communiquer avec les composants parents. Il permet aux composants enfants d'informer les composants parents que quelque chose s'est produit via des événements. 🎜🎜Dans le modèle de composant enfant : 🎜rrreee🎜Dans le modèle de composant parent : 🎜rrreee🎜Dans le code ci-dessus, @click dans le composant enfant écoute un événement de clic et transmet $emit La méthode déclenche un événement nommé "child-click" sur le composant parent. 🎜🎜<child-component> dans le composant parent utilise @child-click pour écouter l'événement, et lorsque la méthode "onChildClick" est déclenchée, la console Sortie "enfant cliqué". 🎜🎜4. Routage🎜🎜Dans Vue, le routage est un concept important. Cela nous permet d'accéder à différentes pages en fonction de différentes URL. Le framework Vue utilise Vue Router pour implémenter les fonctions de routage. 🎜🎜Vous devez d'abord installer Vue Router dans le projet : 🎜rrreee🎜Créez un composant de routage dans le fichier router.js : 🎜rrreee🎜Utilisez Vue.use pour installer Vue Router, puis définissez deux routes , respectivement pour la page d'accueil et la page à propos, et le composant correspondant à chaque route est spécifié via l'attribut component. 🎜🎜Enfin, le composant de routage doit être introduit dans l'instance Vue : 🎜rrreee🎜5 Résumé🎜🎜Dans cet article, nous avons brièvement présenté comment utiliser Vue pour construire un système de base. Du début à la communication et au routage des composants, nous n'avons abordé qu'une petite partie de Vue. Vue possède de nombreuses fonctionnalités et capacités puissantes. J'espère que cet article pourra être utile aux débutants. 🎜

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!