Vue-Lebenszyklus, Vue-Instanz, Vorlagensyntax

Dieses Mal werde ich Ihnen den Vue-Lebenszyklus, die Vue-Instanz und die Vorlagensyntax vorstellen Werfen wir einen Blick auf den Fall. Vue hat sich seit seiner Geburt von einem stillen Nischen-Framework zu einem der drei großen Frameworks in China entwickelt, und auch von der ersten Version bis zur aktuellen 2.5.13 (stabile Version vom 26.01.2018 2014 bis 2018). ). Thema

Vue.js ist eine sehr beliebte

JavaScript

MVVM-Bibliothek. Sie basiert auf datengesteuerten und komponentenbasierten Ideen. Im Vergleich zu Angular.js bietet Vue.js eine einfachere und leichter verständliche API, die uns einen schnellen Einstieg und die Verwendung von Vue.js ermöglicht.

Da ich im vorherigen Blog die Installation von Vue und die Grundkonfiguration von Webpack vorgestellt habe, werde ich in diesem Artikel Vue und die Verwendung von Vue vorstellen. Wenn Sie es gewohnt sind, jQuery zum Betreiben des DOM zu verwenden, sollten Sie die Idee, das DOM manuell zu manipulieren, beim Erlernen von Vue.js bitte beiseite legen, da Vue.js datengesteuert ist Sie müssen das DOM nicht manuell bedienen. Es bindet DOM und

Daten

durch eine spezielle HTML-Syntax. Sobald Sie die Bindung erstellt haben, bleibt das DOM mit den Daten synchron und jedes Mal, wenn sich die Daten ändern, wird das DOM entsprechend aktualisiert.

Natürlich können Sie Vue.js auch in Verbindung mit anderen Bibliotheken wie jQuery verwenden. Wenn Sie den Inhalt dieses Artikels für gut halten, liken Sie ihn bitte. Ich werde die Demo in Zukunft auf Github hochladen.

Gutes Zeug

Wenn Sie Vue lernen möchten, verfügen Sie bitte über mittlere Kenntnisse in HTML, CSS und JavaScript.

Wenn Sie gerade erst anfangen, die Frontend-Entwicklung zu erlernen, ist die Verwendung eines Frameworks als erster Schritt möglicherweise nicht die beste Idee – kommen Sie zurück, nachdem Sie die Grundlagen beherrschen! Vorkenntnisse mit anderen Frameworks sind hilfreich, aber nicht erforderlich. (Originalworte von der offiziellen Website).

1. Der erste Schritt, Vue-Lebenszyklustabelle

Es ist unbedingt erforderlich, die Vue-Lebenszyklustabelle zu verstehen, um sie gut zu lernen

Kommentieren Sie das offizielle Website-Lebenszyklussymbol zur Vertiefung des Verständnisses Eindruck und Verständnis (Quellnetzwerkdiagramm mit Adresse)

2 Vue-Instanz

Jede Vue-Anwendung beginnt mit der Erstellung einer neuen Vue-Instanz mithilfe der Vue-Funktion:

3. Instanz-Lebenszyklus-Hook

Jede Vue-Instanz muss bei ihrer Erstellung eine Reihe von Initialisierungsprozessen durchlaufen – z. B. das Festlegen der Datenbindung, das Übergeben von Methodenparametern und das Mounten der Instanz im DOM und das Aktualisieren das DOM, wenn sich die Daten ändern usw. Gleichzeitig werden während des Prozesses einige Funktionen namens Lebenszyklus-Hooks ausgeführt, sodass Sie in verschiedenen Phasen Ihren eigenen Code hinzufügen können.

var vm = new Vue({
  // 选项
})

Zum Beispiel kann der gemountete Hook verwendet werden, um Code auszuführen, nachdem eine Instanz erstellt wurde:

Es gibt auch andere Hooks, die in verschiedenen Phasen des Instanzlebenszyklus aufgerufen werden. wie aktualisiert und zerstört. Der this-Kontext eines Lebenszyklus-Hooks verweist auf die Vue-Instanz, die ihn aufgerufen hat.

3. Vorlagensyntax

new Vue({
  data: {
    a: 1
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

Vue.js verwendet eine HTML-basierte Vorlagensyntax, die es Entwicklern ermöglicht, das DOM deklarativ an die Daten der zugrunde liegenden Vue-Instanz zu binden. Alle Vue.js-Vorlagen sind legales HTML, sodass sie von Browsern und HTML-Parsern analysiert werden können, die der Spezifikation folgen.

In der zugrunde liegenden Implementierung kompiliert Vue Vorlagen in virtuelle DOM-Rendering-Funktionen. In Kombination mit dem reaktionsfähigen System kann Vue intelligent berechnen, wie viele Komponenten neu gerendert werden müssen, und die Anzahl der DOM-Operationen minimieren.

Wenn Sie mit virtuellem DOM vertraut sind und die pure Leistung von JavaScript bevorzugen, können Sie Renderfunktionen auch direkt ohne Vorlagen schreiben und dabei die optionale JSX-Syntax verwenden. (Originalwörter von der offiziellen Website)

3.1. Textinterpolation

Die häufigste Form der Datenbindung ist die Textinterpolation mit der „Mustache“-Syntax (doppelte geschweifte Klammern):

Mustache-Tag wird durch den Wert des msg-Attributs im entsprechenden Datenobjekt ersetzt. Immer wenn sich die msg-Eigenschaft des gebundenen Datenobjekts ändert, wird der Inhalt am Interpolationspunkt aktualisiert.

vue ist die standardmäßige bidirektionale Bindung. Wenn Sie keine bidirektionale Bindung wünschen, verwenden Sie bitte den Befehl v-once für einmalige Daten. Beachten Sie jedoch, dass dies Auswirkungen auf die gesamte Datenbindung hat Knoten:

<span>Message: {{ msg }}</span>

3.2. Original-HTML

Doppelte geschweifte Klammern interpretieren die Daten als gewöhnlichen Text statt als HTML-Code. Um echtes HTML auszugeben, müssen Sie die v-html-Direktive verwenden:

<span v-once>这个将不会改变: {{ msg }}</span>

Dynamisch gerendertes beliebiges HTML auf Ihrer Website kann sehr gefährlich sein, da es leicht zu XSS-Angriffen führen kann. Verwenden Sie die HTML-Interpolation nur für vertrauenswürdige Inhalte und niemals für vom Benutzer bereitgestellte Inhalte.

3.3. Verwenden Sie den JavaScript-

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Ausdruck

Bisher hat Vue in der Vue-Vorlage nur einfache Attributschlüsselwerte gebunden. Tatsächlich bietet Vue.js jedoch für alle Datenbindungen vollständige Unterstützung für JavaScript-Ausdrücke.

3.4. Befehl

Befehl ist ein spezielles Attribut mit v- Präfix. Es wird erwartet, dass der Wert eines Direktivenattributs ein einzelner JavaScript-Ausdruck ist (v-for ist die Ausnahme). Die Aufgabe der Direktive besteht darin, die damit verbundenen Auswirkungen reaktiv auf das DOM anzuwenden, wenn sich der Wert des Ausdrucks ändert. Sehen Sie sich die Beispiele an, die wir in der Einleitung gesehen haben

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="&#39;list-&#39; + id"></div>

<p v-if="seen">现在你看到我了</p>

v-if 指令将根据表达式 seen 的值的真假来插入/移除 e388a4556c0f65e1904146cc1a846bee 元素。

3.4.1、 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

3.4.2、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写:

<a v-bind:href="url">...</a>...

v-on缩写:

<a v-on:click="doSomething">...</a>...

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

一次前端面试的经历

前端微信分享jssdk config:invalid signature 签名错误的解决方法

前端入门之css3

Das obige ist der detaillierte Inhalt vonVue-Lebenszyklus, Vue-Instanz, Vorlagensyntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!