So erstellen Sie mit Vue ein Basissystem

Mit der rasanten Entwicklung der Front-End-Technologie hat sich Vue.js zu einem weit verbreiteten Javascript-Framework in der Branche entwickelt. Es kann zum Erstellen komplexer Single-Page-Webanwendungen verwendet werden. In diesem Artikel wird erläutert, wie Sie mit Vue ein Basissystem erstellen.

1. Erste Schritte

Zuerst müssen wir Vue lokal installieren. Sie können die offizielle Vue.js-Bibliothek direkt herunterladen oder mit npm wie folgt installieren:

npm install vue

Fügen Sie die Vue.js-Bibliothek in die HTML-Seite ein:

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

Sie Sie können die Vue-CLI (Befehlszeilenschnittstelle) verwenden, um schnell ein neues Projekt zu erstellen. Hier verwenden wir Vue CLI 3, um ein neues Projekt zu erstellen.

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

Es wird eine Reihe von Konfigurationsoptionen geben, die Sie ausfüllen müssen. Nach der Auswahl können Sie ein neues Vue-Projekt erstellen.

2. Komponenten erstellen

Vue übernimmt den MVVM-Modus, das heißt, die Ansichtsschicht und die Datenschicht sind getrennt. Mit Vue.js können wir schnell Komponenten erstellen, und eine Komponente entspricht einem Datencontainer.

Das Erstellen einer Komponente ist sehr einfach. Sie müssen lediglich eine Komponente in der Vue-Instanz registrieren und ihre erforderlichen Daten und Methoden deklarieren. Das Folgende ist ein einfaches Beispiel für die Erstellung einer Komponente:

<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' })

Im obigen Code haben wir eine Komponente mit dem Namen „my-component“ in der Vue-Instanz über den Vue.componentregistriert >Methode“-Komponente. Seine Daten stammen aus dem Attribut message in der Methode 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

Zuletzt mounten Sie die Komponente my-component in das angegebene HTML-Element in der Vue-Instanz.

3. Komponentenkommunikation

In Vue ist die Kommunikation zwischen Komponenten eine häufige Anforderung. Im Folgenden werden die Kommunikationsmethoden zwischen Komponenten erläutert.

3.1 Props

Props sind eine Möglichkeit, Daten an untergeordnete Komponenten zu übergeben. Es ermöglicht übergeordneten Komponenten, Daten über die Eigenschaftsbindung an untergeordnete Komponenten zu übergeben. #🎜🎜##🎜🎜#In der übergeordneten Komponentenvorlage: #🎜🎜#

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

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

#🎜🎜#In der untergeordneten Komponentenvorlage: #🎜🎜#rrreee#🎜🎜#Im obigen Code befinden wir uns in der übergeordneten Komponente template-Tag erstellt und eine Zeichenfolge mit dem Namen messageFromParent wird mithilfe des Attributs :message übergeben. #🎜🎜##🎜🎜#Der props einer Unterkomponente ist ein Objekt, mit dem die Eigenschaften und Typen definiert werden, die die aktuelle Komponente empfangen kann. In diesem Beispiel verwendet die untergeordnete Komponente nur ein message-Attribut, dessen Typ String ist. #🎜🎜#

3.2 Event

#🎜🎜#Event ist eine Möglichkeit, untergeordneten Komponenten die Kommunikation mit übergeordneten Komponenten zu ermöglichen. Es ermöglicht untergeordneten Komponenten, übergeordnete Komponenten über Ereignisse zu benachrichtigen, dass etwas passiert ist. #🎜🎜##🎜🎜#In der untergeordneten Komponentenvorlage: #🎜🎜#rrreee#🎜🎜#In der übergeordneten Komponentenvorlage: #🎜🎜#rrreee#🎜🎜#Im obigen Code ist der @ in der Der Klick der untergeordneten Komponente lauscht auf ein Klickereignis und sendet über die Methode $emit ein Ereignis mit dem Namen „child-click“ an die übergeordnete Komponente. #🎜🎜##🎜🎜#<child-component> in der übergeordneten Komponente verwendet @child-click, um das Ereignis abzuhören, und die Methode „onChildClick“ ist es Bei Auslösung gibt die Konsole „Kind angeklickt“ aus. #🎜🎜##🎜🎜#4. Routing #🎜🎜##🎜🎜#In Vue ist Routing ein wichtiges Konzept. Es ermöglicht uns, basierend auf unterschiedlichen URLs zu verschiedenen Seiten zu springen. Das Vue-Framework verwendet Vue Router, um Routing-Funktionen zu implementieren. #🎜🎜##🎜🎜#Zuerst müssen Sie Vue Router im Projekt installieren: #🎜🎜#rrreee#🎜🎜#Erstellen Sie eine Routing-Komponente in der Datei router.js: #🎜🎜#rrreee#🎜🎜#Verwenden Sie Vue.use wird zum Installieren von Vue Router verwendet. Anschließend werden zwei Routen definiert, nämlich die Startseite und die About-Seite. Die jeder Route entsprechende Komponente wird über die Komponenteangegeben > Attribut. #🎜🎜##🎜🎜#Zuletzt müssen Sie die Routing-Komponente in die Vue-Instanz einführen: #🎜🎜#rrreee#🎜🎜#5. Zusammenfassung #🎜🎜##🎜🎜#In diesem Artikel stellen wir kurz vor, wie Vue zum Aufbau eines Basissystems zu verwenden. Von den ersten Schritten bis zur Komponentenkommunikation und dem Routing haben wir nur einen kleinen Teil von Vue angesprochen. Vue verfügt über viele leistungsstarke Funktionen und Fähigkeiten. Ich hoffe, dieser Artikel kann Anfängern hilfreich sein. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Vue ein Basissystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!