Warum Vuejs verwenden?

Vue.js ist eine einfach zu verwendende JS-Bibliothek. Sie kann reaktionsfähige Datenbindung und kombinierte Ansichtskomponenten implementieren.

Vue.js ist eigentlich eine JavaScript-Benutzeroberfläche Bei der Bibliothek handelt es sich um ein fortschrittliches Framework zum Erstellen datengesteuerter Webschnittstellen. Das Ziel besteht darin, mithilfe von APIs reaktionsfähige Datenbindungs- und kombinierte Ansichtskomponenten so einfach wie möglich zu implementieren. Im folgenden Artikel werde ich detailliert vorstellen, warum Vue verwendet werden sollte. .js

[Empfohlene Kurse: Vue.js]

Grund für die Verwendung von vue.js

vue.js ist leicht zu starten, einfach und verfügt über viele Tools, einschließlich API, Leistung usw. Es ist nur ein Skript erforderlich Erleben Sie es wunderbar

Der Einstiegspunkt jeder Vue-Anwendung wird über eine Instanz erstellt. Diese Instanz konfiguriert dann den Rest der Anwendung und erhält untergeordnete Mitglieder, wenn die Anwendung erweitert wird. Beispiel:

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <p>{{ message }}</p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;这是我的第一个Vue.js文件!&#39;
  }
})
</script>

Konfigurieren Sie die Instanz, indem Sie ein Objekt übergeben, das Informationen über die Anwendung und den Ort enthält, an den sie geladen werden soll.

el-Attribut: Gibt an, auf welchem ​​Element es installiert werden soll, und der Wert ist das festgelegte ID-Element.

Datenattribut: Um an die angegebenen Daten in den Ansichtsdaten gebunden zu werden, verfügt dieses Attribut über ein Objekt mit einem Wert, auf den über die Vorlage zugegriffen werden kann.

Hinweis: In der div-App mit der ID installieren wir die Anwendung.

Verwenden Sie doppelte geschweifte Klammern, um Daten an die Vorlage zu binden, und verwenden Sie message, um sie während der Bindung des Konfigurationswerts im Datenobjekt anzugeben .

Datenbindung

Bedingt Eine sehr nützliche Funktion in JS-Frameworks ist die Möglichkeit dazu Binden Sie Daten an Ansichten, bevor Sie Entscheidungen treffen. Wir können Vue anweisen, nur zu binden, wenn der Wert zu „true“ aufgelöst wird, den

loop

bereitstellen kann Wir verwenden eine einfache API, um eine Reihe gebundener Daten zu durchlaufen. Die v-for-Direktive verwendet sie für diesen Zweck. Wir benötigen lediglich ein Datenarray: muss die Form „site“ haben , „sites“ ist das Quelldaten-Array und „site“ ist ein Alias ​​für die Array-Element-Iteration

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <h2 id="为true时显示demo">为true时显示demo1</h2>
  <h2 id="为true时显示demo">为true时显示demo2</h2>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   demo1:true
  }
})
</script>

Zwei-Wege-Bindung

Die bidirektionale Bindung in Vue ist sehr einfach und es ist nur eine Anweisung erforderlich, um das V-Modell zu implementieren. Lassen Sie uns eine bidirektionale Bindung implementieren, indem wir die V-Modell-Direktive an die Texteingabe anhängen und gleichzeitig die Daten anzeigen, um den Wert im Eingabefeld

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <ul>
  	<li v-for="site in sites">{{site.name}}</li>
  </ul>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   sites:[
{name:&#39;张三&#39;},
{name:&#39;李四&#39;},
{name:&#39;王五&#39;}
   ]
  }
})
</script>

Zusammenfassung anzuzeigen : Das ist alles. Dies ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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