Vue.jsErste 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.

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.

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 :)