Analyse der Download-Methode und der Verwendungsschritte von Vue.js-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-05-22 11:01:47

Original

3421 Leute haben es durchsucht

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"></script>

Nach dem Login kopieren

Vue-Code-Instanz (erstellen)

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </script>

Nach dem Login kopieren

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 id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>

Nach dem Login kopieren

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 v-bind:href="url" rel="external nofollow" >链接文字

Nach dem Login kopieren

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.

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

Nach dem Login kopieren

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!