So erstellen Sie Vue

Vue ist ein beliebtes Front-End-Framework, das eine Fülle von Tools und Ressourcen bereitstellt, die Entwicklern beim Erstellen von Single-Page-Anwendungen helfen. In diesem Artikel behandeln wir die Grundlagen der Erstellung und Verwendung von Vue.

Vue-Installation und -Konfiguration:

1. Bevor Sie mit dem Vue-Build beginnen, müssen Sie Node.js auf Ihrem lokalen Computer installieren, das ein einfaches Befehlszeilentool zum Verwalten verschiedener Entwicklungsabhängigkeiten und -aufgaben bereitstellt.

2. Installieren Sie Vue.js
   Sie können Vue.js mit dem folgenden Befehl auf Ihrem lokalen Computer installieren:

   npm install vue

3. Über Vue-cli
   Vue-cli ist ein Gerüstbau-Tool, das offiziell von Vue.js zum Erstellen großer Projekte bereitgestellt wird , das ein schnelles, konfigurationsfreies Gerüstgenerierungstool bietet, das Entwicklern die schnelle Erstellung von Vue-Projekten erleichtert. Der Installationsbefehl lautet wie folgt:

   npm install -g @vue/cli

Grundlegende Verwendung von Vue:

1. Vue-Instanz
   Die grundlegendste Einheit der Vue-Konstruktion ist die Vue-Instanz, die den Kern von Vue darstellt und das grundlegende Logikmodul kapselt.

Das Folgende ist eine einfache Vue-Instanz, die an ein DOM-Element mit der ID „app“ gebunden ist.

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

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

2. Direktiven
   Vues Direktiven sind spezielle Attribute, die mit dem Präfix v- auf HTML-Tags angegeben werden und zum Binden von Ausdrücken an bestimmte HTML-Elemente verwendet werden.

Hier ist ein einfacher Fall, in dem v-if verwendet wird, um zu verschiedenen Textabsätzen zu wechseln:

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

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

3. Komponenten
   In Vue ist eine Komponente eine Abstraktion, die als benutzerdefiniertes Element betrachtet werden kann.

Hier ist eine einfache Komponente zum Anzeigen einer Nachricht:

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
   In Vue wird Routing als separate Komponente behandelt, die zur Vervollständigung der Navigation zwischen Seiten verwendet werden kann.

Das Folgende ist ein einfaches Routing-Beispiel:

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>

Zusammenfassung:

Dieser Artikel stellt den grundlegenden Aufbau und die Verwendung von Vue vor, einschließlich Installation und Konfiguration, Instanzen, Anweisungen, Komponenten und Routing. Vue bietet eine Fülle von Funktionen und Tools, mit denen Sie Front-End-Entwicklungsaufgaben problemlos erledigen können. Wenn Sie Vue noch nicht verwendet haben, können Sie es ausprobieren.

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