Was ist Vue?

vue ist die Abkürzung für Vue.js. Es handelt sich um ein Open-Source-JavaScript-Framework zum Erstellen von Benutzeroberflächen und ein Webanwendungs-Framework zum Erstellen von Einzelseitenanwendungen. Der Schwerpunkt liegt auf der Ansichtsebene im MVC-Muster Erhalten Sie außerdem problemlos Datenaktualisierungen und interagieren Sie mit der Ansicht und dem Modell über bestimmte Methoden innerhalb der Komponente.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.0, DELL G3-Computer.

【Empfohlene verwandte Artikel: vue.js】

Vue.js (/vjuː/, oder einfach Vue) ist ein Open-Source-JavaScript-Framework zum Erstellen von Benutzeroberflächen und eine Webanwendung zum Erstellen von Einzelseitenanwendungen .

Vue.js ist ein beliebtes JavaScript-Frontend-Framework, das entwickelt wurde, um die Webentwicklung besser zu organisieren und zu vereinfachen. Der Schwerpunkt von Vue liegt auf der Ansichtsebene im MVC-Muster. Gleichzeitig können Datenaktualisierungen problemlos abgerufen und die Interaktion zwischen Ansicht und Modell mithilfe spezifischer Methoden innerhalb der Komponente realisiert werden.

Funktionen

Komponenten

Komponenten sind eine der leistungsstärksten Funktionen von Vue. Um eine große Anwendung besser verwalten zu können, ist es häufig erforderlich, die Anwendung in kleine, unabhängige und wiederverwendbare Komponenten zu zerlegen. In Vue sind Komponenten Erweiterungen grundlegender HTML-Elemente, und ihre Daten und ihr Verhalten können einfach angepasst werden. Der folgende Code ist ein Beispiel für eine Vue-Komponente, dargestellt als Schaltfläche, die Mausklicks zählt.

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: &#39;<button v-on:click="count++">You clicked me {{ count }} times.</button>&#39;
})

Templates

Vue verwendet eine HTML-basierte Vorlagensyntax, die es Entwicklern ermöglicht, DOM-Elemente an Daten in der zugrunde liegenden Vue-Instanz zu binden. Alle Vue-Vorlagen sind legales HTML, sodass sie von Browsern und HTML-Parsern analysiert werden können, die der Spezifikation folgen. In der zugrunde liegenden Implementierung kompiliert Vue Vorlagen in virtuelle DOM-Rendering-Funktionen. In Kombination mit dem reaktionsfähigen System kann Vue die Mindestkosten für das erneute Rendern von Komponenten intelligent berechnen und auf DOM-Vorgänge anwenden, wenn sich der Anwendungsstatus ändert. [12]

Darüber hinaus ermöglicht Vue Entwicklern, die JSX-Sprache direkt als Rendering-Funktion der Komponente zu verwenden, um die Vorlagensyntax zu ersetzen. [13] Das Folgende ist die JSX-Rendering-Version der Schaltfläche, die die Anzahl der Klicks zählen kann (der entsprechende Babel-Prozessor muss konfiguriert werden):

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    "onclick": function() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

Responsives Design

Reaktionsfähigkeit bedeutet, dass sich die Ansicht im MVC-Modell ändert wenn sich das Modell ändert. In Vue müssen Entwickler die Ansicht nur an das entsprechende Modell binden, und Vue kann Änderungen im Modell automatisch beobachten und die Ansicht neu zeichnen. Diese Funktion macht die Zustandsverwaltung von Vue recht einfach und intuitiv.

Übergangseffekte

Vue bietet viele verschiedene Möglichkeiten, Übergangseffekte beim Einfügen, Aktualisieren oder Entfernen von DOM anzuwenden. Enthält die folgenden Tools:

• Automatisches Anwenden von Klassen in CSS-Übergängen und -Animationen

• Kann mit CSS-Animationsbibliotheken von Drittanbietern wie Animate.css verwendet werden.

• Verwenden Sie JavaScript direkt in der Übergangs-Hook-Funktion manipulieren Sie das DOM

• Kann mit JavaScript-Animationsbibliotheken von Drittanbietern wie Velocity.js verwendet werden

Einzelne Dateikomponente

Um sich besser an komplexe Projekte anzupassen, unterstützt Vue Dateien mit einer .vue Erweiterung zum Definieren einer vollständigen Komponente, die anstelle der Verwendung von Vue.component zum Registrieren von Komponenten verwendet wird. Entwickler können Build-Tools wie Webpack oder Browserify verwenden, um einzelne Dateikomponenten zu verpacken.

Core Plugin

vue-router
vuex
vue-loader
vueify 
vue-cli

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