So entwickeln Sie Vue.js-Anwendungen ohne Vue CLI

In den letzten Jahren wurde Vue.js als sehr beliebte JavaScript-Bibliothek häufig zur Entwicklung von Single-Page-Anwendungen (SPA) verwendet. Die Vorteile von Vue.js sind die einfache API, die Benutzerfreundlichkeit und die flexiblen Optionen. Um jedoch ein SPA mit Vue.js zu erstellen, scheint Vue CLI zu einer unverzichtbaren Wahl geworden zu sein. Tatsächlich müssen wir jedoch nicht unbedingt Vue CLI für die Entwicklung verwenden. In diesem Artikel werde ich vorstellen, wie man Vue.js-Anwendungen ohne Vue CLI entwickelt.

1. Voraussetzungen

Bevor Sie eine Anwendung mit Vue.js erstellen, sollten Sie Folgendes beherrschen:

1. HTML-, CSS- und JavaScript-Grundlagen.
2. Vue.js-Grundlagen. 2. Beginnen Sie mit der Entwicklung eine Vue-Instanz

Um Vue.js verwenden zu können, müssen Sie zunächst eine Vue-Instanz erstellen. In diesem Beispiel erstellen wir eine Demonstrationsanwendung „Hallo Welt“.

<script src="https://unpkg.com/vue"></script>

(1)el
1. Die Option „el“ ist erforderlich und wird verwendet, um das HTML-Element anzugeben, das die Vue-Instanz bereitstellen wird.

(2)data

Die Option „data“ ist optional und wird verwendet, um die Anfangsdaten der Vue-Instanz anzugeben.

In Vue.js sind berechnete Eigenschaften eine Codelösung zum Deklarieren von Eigenschaften, deren Ergebnisse auf der Grundlage anderer Daten berechnet werden. Der Vorteil berechneter Eigenschaften besteht darin, dass sie automatisch aktualisiert werden, wenn sich die Daten ändern, von denen sie abhängen. Unten finden Sie ein Beispiel für die Verwendung berechneter Eigenschaften.

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

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, World!'
    }
  })
</script>

In Vue.js können Sie Watcher verwenden, um eine bestimmte Eigenschaft zu überwachen und einige Aufgaben auszuführen, wenn sich ihr Wert ändert. Unten finden Sie ein Beispiel für die Verwendung eines Listeners.

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

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

In diesem Beispiel erstellen wir einen Zähler und geben ihn über einen Watcher an die Konsole aus, wenn sich sein Wert ändert.

Komponenten sind eines der wichtigsten Konzepte in Vue.js. Sie ermöglichen Benutzern die Aufteilung von Seiten in kleinere wiederverwendbare Teile und erleichtern die Organisation und Wartung des Codes. In Vue.js werden Komponenten über die Methode Vue.extend() erstellt.

4. <div id="app">
     <p>{{ count }}</p>
     <button @click="increment()">Increment</button>
   </div>
   
   <script>
     var vm = new Vue({
       el: '#app',
       data: {
         count: 0
       },
       methods: {
         increment: function () {
           this.count++
         }
       },
       watch: {
         count: function (value) {
           console.log(value)
         }
       }
     })
   </script>

   Nach dem Login kopieren
In diesem Beispiel erstellen wir eine Komponente namens „todo-item“, registrieren sie dann in der Vue-Instanz und verwenden sie in der Vorlage.

3. Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man mit Vue.js ein SPA erstellt, ohne Vue CLI zu verwenden. Um dieses Ziel zu erreichen, müssen wir über die folgenden Wissenspunkte verfügen: HTML-, CSS-, JavaScript-Grundlagen und Vue.js-Grundlagen. Als Nächstes erstellten wir eine „Hallo-Welt“-Anwendung, entwickelten sie mithilfe berechneter Eigenschaften und Listener und verwendeten Komponenten, um die Anwendung in kleinere wiederverwendbare Teile zu unterteilen. Obwohl Vue CLI ein sehr praktisches Tool ist, ist Vue.js selbst flexibel und einfach zu verwenden. Für die Entwicklung von SPA ist die Verwendung von Vue CLI nicht erforderlich.

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie Vue.js-Anwendungen ohne Vue CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!