Analyse der Download-Methode und der Verwendungsschritte von Vue.js

Dieses Mal werde ich Ihnen die Schritte zum Herunterladen und Verwenden von Vue.js vorstellen. Was sind die Vorsichtsmaßnahmen, um die Download-Methode und die Verwendung von Vue.js zu analysieren? ein Blick.

Was ist vue.js?

Vue (ausgesprochen /vjuː/, ähnlich wie view) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen.

Anleitungen und Downloads

Vue.js Nutzungsdokumentation wurde sehr vollständig und detailliert verfasst, Sie können sie unter folgender Adresse einsehen: https://cn.vuejs.org/v2/guide/

vue.js Bei Verwendung als Bibliothek können Sie es unter der folgenden Adresse herunterladen: https://cn.vuejs .org/v2 /guide/installation.html

Vue.jsGrundlegende Konzepte

Nachdem wir vue heruntergeladen haben. js, wir müssen vue.js über das Skript-Tag auf der Seite einführen. Sie können die Entwicklungsversion vue.js während der Entwicklung verwenden.

script type="text/javascript" src="js/vue.min.js">

Vue-Code-Instanz (erstellen)

nbsp;html>

  <meta>
  <title></title>


  <p>{{ message }}</p>

<script></script>
<script>
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:&#39;#app&#39;,
    data : {message:&#39;好湿呀&#39;}
  });
  </script>

Daten und Methoden

Wenn eine Vue-Instanz erstellt wird, fügt sie alle in ihrem Datenobjekt gefundenen Eigenschaften dem reaktiven System von Vue hinzu. Wenn sich die Werte dieser Eigenschaften ändern, „reagiert“ die Ansicht, indem sie die neuen Werte anpasst. Sie können auch Methoden in der Vue-Instanz definieren und die Methode verwenden, um die Daten im Datenobjekt in der Instanz zu ändern. Wenn sich die Daten ändern, ändern sich auch die Daten in der Ansicht.

Vue-Instanzcode (Methode)

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<p>
</p><p>{{ message }}</p>
<button>改变数据和视图</button>

Vus.js-Vorlagensyntax

Vorlagensyntax bezieht sich auf das Einfügen von Daten in HTML

DatenbindungDie gebräuchlichste Form ist die Textinterpolation unter Verwendung der „Mustache“-Syntax (doppelte geschweifte Klammern), zum Beispiel:

{{ msg }}

Sie können auch Ausdrücke in den eingefügten Wert schreiben:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a>链接文字</a>

Befehl

Anweisungen sind spezielle Attribute mit dem Präfix „v-“. Es wird erwartet, dass der Wert des Direktivenattributs ein einzelner JavaScript-Ausdruck ist. Die Aufgabe der Direktive besteht darin, die damit verbundenen Auswirkungen reaktiv auf das DOM anzuwenden, wenn sich der Wert des Ausdrucks ändert. Zu den gängigen Anweisungen gehören v-bind, v-if und v-on.

<p>是否显示这一段

<button>按钮</button></p>

Vue.js-Funktionen

• Einfach: HTML-Vorlage + JSON-Daten, dann eine Vue-Instanz erstellen, So einfach.

• Datengesteuert: Verfolgen Sie abhängige Vorlagenausdrücke und berechnete Eigenschaften automatisch.

• Komponentisierung: Verwenden Sie entkoppelte und wiederverwendbare Komponenten, um die Schnittstelle zu erstellen.

• Leichtgewicht: ~24 KB min+gzip, keine Abhängigkeiten.

• Schnell: Präzise und effiziente asynchrone Batch-DOM-Updates.

• Modulfreundlich: Installieren Sie über NPM oder Bower und fügen Sie sich nahtlos in Ihren Workflow ein.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Erstellen eines HTTP-Dateiservers mit Node.js

Node. js-Schritte zur Verwendung der Jade-Template-Engine Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonAnalyse der Download-Methode und der Verwendungsschritte von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!