Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung der einfachen Installation und des Schnellstarts von Vue.j

Ausführliche Erklärung der einfachen Installation und des Schnellstarts von Vue.j

小云云Original: 2018-01-15 13:04:341384Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur einfachen Installation und zum Schnellstart von Vue.j vor. Ich hoffe, dass er Ihnen helfen kann.

Wir haben das Vue.js-Framework im vorherigen Abschnitt vorgestellt. In diesem Abschnitt können wir versuchen, kleinen Code zu schreiben.

1 Einfache Installation

Um Vue.js zu verwenden, müssen wir es zuerst in unserem Projekt installieren. Es ist definitiv die einfachste Vergessen Sie die komplizierten und zeitaufwändigen Installationsmethoden, führen Sie direkt eine js-Datei ein und geben Sie zuerst den Code ein.

<head>
    <meta charset="UTF-8">
    <title>简易安装 Vue.js</title>
    <script src="vue.js"></script>
</head>

Die offizielle Website bietet einen Ort zum Herunterladen des Vue.js-Quellcodes: https://cdn.jsdelivr.net/vue/2.1. 3/vue.js

Wenn Sie es nicht lokal herunterladen möchten, können Sie CDN direkt verwenden, um Online-Ressourcen einzuführen. Das Gleiche ist möglich:

<script src="https://xx/vue.js"></script>

Auf diese Weise haben wir Vue.js auf einfachste Weise erfolgreich in unser Projekt eingeführt. Diese ausgefallenen Installationsmethoden wie npm und Bower werden wir uns später ansehen.

2 Nachdem die datengesteuerte Ansicht

eingeführt wurde, können wir sie verwenden. Ich habe gehört, dass das Beste daran die datengesteuerte Ansicht ist, die DOM-Vorgänge frei macht, sodass Sie keine komplexen und leistungsintensiven DOM-Vorgänge mehr ausführen müssen. Mal sehen, wie es ausgeht!

Angenommen, wir möchten nun den Wert einer Variablen im js-Objekt auf der Seite rendern. Der traditionelle Ansatz besteht darin, zuerst getElementById zu verwenden, um das DOM-Knotenobjekt abzurufen, und dann seinen Inhalt mit innerHTML festzulegen .

Jetzt müssen Sie in Vue.js Folgendes tun:

<p id="app">
  公众号：{{ name }}
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       name:"web前端教程",
     }
   });
 </script>

Wir erstellen eine Instanz-VM über new Vue(), die Parameter Sind ein JSON-Objekt, stellt das Attribut el ein DOM-Element (id='app') bereit, das auf der Seite vorhanden ist und angibt, dass diese Instanz dem angegebenen DOM-Knoten zugeordnet ist.

Auf dem DOM-Knoten können wir die Syntax der doppelten Klammern {{ }} verwenden, um die Attributwerte wiederzugeben, die bereits in den Objektdaten der Vue-Instanz vorhanden sind, beispielsweise den Wert des Namens Attribut im obigen Fall.“ „Web-Front-End-Tutorial“ wird auf der Seite gerendert, ersetzen Sie {{ name }} und die Anzeige lautet: „Web-Front-End-Tutorial“.

In diesem Prozess haben wir keinen Code zum Betrieb von DOM-Knoten geschrieben. Darüber hinaus fungiert das ViewModel im MVVM-Modus als Monitor. Wenn die Rolle feststellt, dass sich die Modelldaten geändert haben, benachrichtigt sie die Ansicht, um diese zu aktualisieren. Für diesen Prozess ist keine Teilnahme erforderlich.

(rezension mvvm)

Ändern wir den Wert im Namen in „Hallo Wort“, ohne Code hinzuzufügen Die Ansicht wird automatisch aktualisiert.

Sehen Sie sich das GIF unten an, lassen Sie es uns über den Chrome-Browser demonstrieren:

(Langsamer fahren, warten, bis das GIF geladen ist)

Wie im Bild oben gezeigt, ändert sich die Seite sofort, sobald der Wert von name geändert wird, ohne dass Sie innerHTML schreiben müssen, um die Ansicht zu aktualisieren.

Dies ist die datengesteuerte Ansicht von Vue.js.

3 Zwei-Wege-Bindung

Bequemer ist, dass Vue.js auch praktische Syntaxanweisungen bereitstellt, um eine bidirektionale Bindung von Ansichten und Daten zu erreichen. Mit anderen Worten: Nicht nur Änderungen an den Daten können die Ansicht steuern, sondern auch die Daten in der Modellebene können problemlos aktualisiert werden, wenn der Benutzer einige Vorgänge auf der Seite ausführt.

Beispiel: Überwachen Sie den vom Benutzer in das Seiteneingabefeld eingegebenen Inhalt und aktualisieren Sie ihn dann in Echtzeit auf der Seite.

In Vue können wir dies einfach mithilfe der V-Model-Direktive implementieren. (Machen Sie sich keine Gedanken darüber, was das V-Modell ist, es wird in den folgenden Kapiteln ausführlich vorgestellt.)

<p id="app">
   <input v-model="number">
   <p>数字:{{ number }}</p>
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       number:"",
     }
   });
 </script>

Der Effekt ist wie folgt:

(Fahren Sie langsamer und warten Sie, bis das GIF vollständig geladen ist )

In diesem Fall müssen wir keinen Code schreiben, um die Inhaltsänderungen des Eingabesteuerelements zu überwachen. Der vom Benutzer eingegebene Inhalt aktualisiert den Wert der Datenattributnummer in der VM-Instanz Sobald die Nummer aktualisiert ist, wird die Ansicht aktualisiert. Denn all dies wird von Vue.js für Sie erledigt.

4 Komponenten

Oben haben wir den Datentreiber von Vu.jse demonstriert. Vergessen Sie nicht, dass wir im vorherigen Abschnitt An erwähnt haben Wichtiger Kern ist: Komponentisierung.

Bei der Komponentisierung werden bestimmte Blöcke unabhängig voneinander aus der Seite extrahiert und in einer Komponente gekapselt, die problemlos wiederverwendet werden kann.

Beispiel: Angenommen, auf der Seite befinden sich mehrere identische Karten:

传统的办法，我们可以要写三份同样的HTML布局：

 <p id="app">
  <!--第1个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第2个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第3个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
 </p>

如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。

在Vue.js中，我们试着把卡片封装成一个组件。

<p id="app">
   <card></card>
   <card></card>
   <card></card>
 </p>

 <script>
  //注册一个名叫card的组件
 Vue.component(&#39;card&#39;,{
    template:`<p>
      <img src="logo.png" alt="">
      <h2>web前端教程</h2>
      <p>这里是描述，很长的描述</p>
      <button>我是按钮</button>
    </p>`
  });

  new Vue({
    el:"#app"
  });
 </script>

我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用964759f9f39e815cf935a94673adce1a04ee71702759d3cc1d177dc6f313408c就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高。

可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数，后面我们会有专门的章节来介绍组件的详细用法。

5 本节小结

看到这里，你已经了解了Vue.js的数据驱动和组件化两大核心了，你已经入门了。后面的章节都是围绕这两个核心点来展开讲解。

In Verbindung stehende Artikel

Mehr sehen