Was ist Vue.js?

Vue.js ist eine Bibliothek, die zum Erstellen interaktiver Weboberflächen verwendet wird.

Vue.js bietet MVVM-Datenbindung und ein komponierbares Komponentensystem mit einer einfachen, flexiblen API.

Dieses Kapitel behandelt Vue 1.x. Für Vue 2.x klicken Sie auf die folgenden Links.

Vue.js 2.0 Tutorial:http://www.example.com/vue2/vue-tutorial.html

Vue 2.0 Einsteigerhandbuch:http://www.example.com/w3cnote/vue2-start-coding.html

Vue.js 3.x Tutorial:https://www.example.com/vue3/vue3-tutorial.html

Vue.js-Funktionen

  • Einfachheit:HTML-Vorlage + JSON-Daten, dann eine Vue-Instanz erstellen, so einfach ist das.
  • Datengetrieben:Verfolgt automatisch abhängige Template-Ausdrücke und berechnete Eigenschaften.
  • Komponentenbasiert:Schnittstellen mit entkoppelten, wiederverwendbaren Komponenten erstellen.
  • Leichtgewichtig:~24kb min+gzip, keine Abhängigkeiten.
  • Schnell:Präzise und effiziente asynchrone Batch-DOM-Aktualisierungen.
  • Modulfreundlich:Installation über NPM oder Bower, nahtlose Integration in Ihren Workflow.

Wenn Ihnen eines der folgenden gefällt, werden Sie Vue.js definitiv mögen:

  • Erweiterbarer Datenbindungsmechanismus
  • Native Objekte als Modelle
  • Prägnante und klare API
  • Komponentenbasierter UI-Aufbau
  • Kann zusammen mit mehreren leichtgewichtigen Bibliotheken verwendet werden

Vue.js-Installation

Standalone-Version

Direkt herunterladen und mit einem <script>-Tag einbinden; Vue wird als globale Variable registriert.

Offizielle Download-Adresse der Vue.js-Website:http://vuejs.org/guide/installation.html

Sie können die Produktionsversion direkt von der offiziellen Website herunterladen und in Ihrem Projekt verwenden.

Alternativ können Sie die CDN-Bibliothek für statische Ressourcen (Version 1.0.18) verwenden:

https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js

NPM-Installation

Bei der Erstellung großer Anwendungen mit Vue.js wird die Installation über NPM empfohlen:

# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
# 开发版本（直接从 GitHub 安装）
$ npm install vuejs/vue#dev

Bower-Installation

# 最新稳定版本
$ bower install vue

Die erste Vue-Anwendung erstellen

Als Nächstes erstellen wir unsere erste Vue-Anwendung.

View-Schicht- HTML-Code:

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

Model-Schicht- JavaScript-Code (muss nach dem angegebenen HTML-Element platziert werden):

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

Ausprobieren »

Zwei-Wege-Datenbindung

Als Nächstes erstellen wir eine HTML-Datei für die View-Schicht: vueapp.htm, und eine Datei für die Model-Schicht: vueapp.js, und dann vervollständigen wir über vue.js (unter Verwendung der v-model-Direktive) die zugrunde liegende Logik dazwischen, um den Bindungseffekt zu erzielen. Eine Änderung einer der beiden Schichten bewirkt, dass sich die andere Schicht ändert.

Code für vueapp.htm:

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

Code für vueapp.js:

new Vue({
  el: '#app',
  data: {
    message: 'Example!'
  }
})

Ausprobieren »

Im obigen Beispiel ändert sich {{message}}, wenn sich das Eingabefeld ändert. Wenn Sie nicht möchten, dass es sich ändert, können Sie es wie folgt ändern:

{{* message }}

Es unterstützt auch einige einfache Ausdrücke:

<!-- 字符串连接 -->
{{ message + '官网地址：www.example.com' }}
<!-- 字符串反转 -->
{{ message.split('').reverse().join('') }}

Ausprobieren »

Listenausgabe

Listenausgabev-forkann mit dieser Direktive umgesetzt werden (v-for ersetzt v-repeat in Versionen vor 1.0):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script>
    new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
</script>
</body>
</html>

Ausprobieren »

Beispiel für mehrdimensionale Arrays

<div id="app">
  <ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Example官网',
    items: [
      { message: 'www.example.com' },
      { message: 'www.example.com' }
    ]
  }
})
</script>

Ausprobieren »

Bedingtes Rendern

In String-Templates wie Handlebars müssen wir einen bedingten Block wie diesen schreiben:

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

In Vue.js verwenden wir die Direktive v-if, um dieselbe Funktionalität zu erreichen:

<h1 v-if="ok">Yes</h1>

Du kannst auch v-else verwenden, um einen else-Block hinzuzufügen:

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

Ausprobieren »

Da v-if eine Direktive ist, muss sie auf ein Element angewendet werden. Aber was, wenn wir mehrere Elemente umschalten möchten? In diesem Fall können wir ein <template>-Element als Wrapper-Element verwenden, v-if darauf anwenden, und das endgültige gerenderte Ergebnis wird es nicht enthalten.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

v-show funktioniert ähnlich wie v-if, außer dass Elemente mit v-show immer gerendert werden und im DOM verbleiben, und v-show das <template>-Tag nicht unterstützt.

<h1 v-show="ok">Hello!</h1>

Filter

Ähnlich wie Pipes in Linux verwendet vue.js ebenfalls |:

{{message | uppercase}}

Dies gibt message in Großbuchstaben aus. Filter können auch miteinander verkettet werden:

{{message | reverse | uppercase}}

Hier ist reverse kein eingebauter Filter. Wir können Vue.filter verwenden, um einen benutzerdefinierten zu definieren:

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})

Ausprobieren »

Referenzdokumentation

Offizielle Website:http://vuejs.org/

Offizielle Dokumentation:http://cn.vuejs.org/examples/