suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Fälle mit der Download-Methode von Vue.js

Detaillierte Erläuterung der Fälle mit der Download-Methode von Vue.js

php中世界最好的语言
php中世界最好的语言Original
2018-05-30 11:42:191640Durchsuche

Dieses Mal werde ich Ihnen den Fall der Verwendung der Vue.js-Download-Methode ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vue.js-Download-Methode? Werfen wir einen Blick darauf.

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>

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>

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>

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" >链接文字

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">按钮

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:

So verwenden Sie Node.js, um das Dialogfeld ngDialog zu verwenden

So verwenden Sie JS Arrays und Objekte zusammenführen Zusammenführen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Fälle mit der Download-Methode von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So manipulieren Sie Cookies mit Node.js, um angemeldet zu bleibenNächster Artikel：So manipulieren Sie Cookies mit Node.js, um angemeldet zu bleiben

In Verbindung stehende Artikel

Mehr sehen