Vue.js Tutorial => Erste Schritte mit Vue.js

Bemerkungen

Vue.js ist ein schnell wachsendes Front-End-Framework für JavaScript , das von Angular.js , Reactive.js und Rivets.js inspiriert wurde und ein Rivets.js Design der Benutzeroberfläche, Manipulation und tiefe Reaktivität bietet.

Es wird als MVVM Muster-Framework, Model-View View-Model , das auf dem Konzept der bidirektionalen Bindungsdaten an Komponenten und Ansichten basiert. Es ist unglaublich schnell, übertrifft die Geschwindigkeiten anderer Top-Tier- JS Frameworks und ist sehr benutzerfreundlich für einfache Integration und Prototyping.

Versionen

Ausführung	Veröffentlichungsdatum
2.4.1	2017-07-13
2.3.4	2017-06-08
2.3.3	2017-05-09
2.2.6	2017-03-26
2.0.0	2016-10-02
1.0.26	2016-06-28
1.0.0	2015-10-26
0,12,0	2015-06-12
0,11,0	2014-11-06

"Hallo Welt!" Programm

Um Vue.js zu verwenden , stellen Sie sicher, dass Sie die Skriptdatei in Ihrem HTML- Code enthalten. Fügen Sie Ihrem HTML-Code beispielsweise Folgendes hinzu.

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

Einfaches Beispiel

HTML-Vorlage

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

JavaScript

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

Sehen Sie sich eine Live-Demo dieses Beispiels an.

Vielleicht möchten Sie auch das von Vue.js erstellte Beispiel "Hello World" überprüfen.

Hallo Welt in Vue 2 (Der JSX-Weg)

JSX soll vom Browser nicht interpretiert werden. Es muss zuerst in Standard-Javascript übersetzt werden. Um JSX verwenden zu können, müssen Sie das Plugin für babel babel-plugin-transform-vue-JSX installieren

Führen Sie den folgenden Befehl aus:

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev

und fügen Sie es wie .babelrc zu Ihrem .babelrc :

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

Beispielcode mit VUE JSX:

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

new Vue({  
  el: '#app',
  methods: {
    handleClick () {
      alert('Hello!')
    }
  },
  render (h) {
    return (
      <div>
        <h1 on-click={this.handleClick}>Hello from JSX</h1>
        <p> Hello World </p>
      </div>
    )
  }
})

Mit JSX können Sie kurze HTML / XML-ähnliche Strukturen in dieselbe Datei schreiben wie JavaScript-Code.

Glückwunsch, du bist fertig :)

Benutzereingaben behandeln

Mit VueJS können auch Benutzereingaben problemlos verarbeitet werden. Durch die bidirektionale Bindung mit dem V-Modell können Daten ganz einfach geändert werden.

HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
<input v-model="message"> 
</div>

JS:

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

Es ist sehr einfach, eine bidirektionale Bindung in VueJS mithilfe der v-model Direktive durchzuführen.

Sehen Sie sich hier ein Live-Beispiel an.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

Vue.js Tutorial
Erste Schritte mit Vue.js

Suche…