Umfassende Analyse von VueJS

Was ist Vue.js?

Vue.js (ausgesprochen /vjuː/, ähnlich wie view) ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks verwendet Vue ein inkrementelles Bottom-up-Entwicklungsdesign. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene und ist sehr einfach zu erlernen und in andere Bibliotheken oder bestehende Projekte zu integrieren. Vue hingegen ist vollständig in der Lage, komplexe Single-Page-Anwendungen zu steuern, die mithilfe von Single-File-Komponenten und Bibliotheken entwickelt werden, die vom Vue-Ökosystem unterstützt werden.

Das Ziel von Vue.js ist es, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten über eine möglichst einfache API zu ermöglichen.

Wenn Sie ein erfahrener Frontend-Entwickler sind und den Unterschied zwischen Vue.js und anderen Bibliotheken/Frameworks wissen möchten, schauen Sie sich den Vergleich mit anderen Frameworks an.

1. VueJS Zweck:

Der Kern von VueJs besteht darin, Folgendes zu lösen:

a: Das Problem der Datenbindung lösen,

b: Der Hauptzweck des Vue-Frameworks besteht darin, umfangreiche Einzelseitenanwendungen zu entwickeln.

c: Es unterstützt auch die Komponentisierung, dh die Seite kann eingekapselt werden Wenn Sie mehrere Komponenten verwenden, maximiert die Verwendung der Programmierung im Bausteinstil die Wiederverwendbarkeit von Seiten (unterstützt die Komponentisierung).

2.VueJS-Funktionen:

I: MVVM-Modus (Datenvariable (Modell) ändert sich, Ansicht (Ansicht) ändert sich auch, Ansicht (Ansicht) ändert sich, Datenvariable (Modell) hat sich ebenfalls geändert)

Die Verwendung des MVVM-Musters bietet mehrere Vorteile:

　1. Geringe Kopplung. Die Ansicht kann unabhängig vom Modell geändert und geändert werden. Ein ViewModel kann an verschiedene Ansichten gebunden werden. Wenn sich die Ansicht ändert, kann das Modell unverändert bleiben, und wenn sich das Modell ändert, kann auch die Ansicht unverändert bleiben.

　2. Wiederverwendbarkeit. Sie können eine Ansichtslogik in das ViewModel einfügen, sodass viele Ansichten diese Ansichtslogik wiederverwenden können.

　3. Unabhängige Entwicklung. Entwickler können sich auf die Entwicklung von Geschäftslogik und Daten (ViewModel) konzentrieren. Designer können sich auf das Design der Benutzeroberfläche (Ansicht) konzentrieren.

　4. Testbarkeit. Sie können die Schnittstelle (View) gegen ViewModel testen

II: Komponentisierung

III Befehlssystem

IIII: vue2.0 beginnt mit der Unterstützung von Virtualisierungsdom

vue1.0 betreibt echte Dom-Elemente anstelle von virtuellen Dom

Virtueller Dom: kann die Aktualisierungsgeschwindigkeit der Seite verbessern

Virtuell DOM hat Vor- und Nachteile.

A: Größe – eine davon ist, dass mehr Funktionen mehr Codezeilen im Codepaket bedeuten. Glücklicherweise ist Vue.js 2.0 noch relativ klein (aktuelle Version 21,4 KB) und

viele Dinge werden entfernt.

B: Speicher – Ebenso muss das virtuelle DOM das vorhandene DOM kopieren und im Speicher speichern. Dies ist ein Kompromiss zwischen DOM-Aktualisierungsgeschwindigkeit und Speichernutzung.

C: Nicht auf alle Situationen anwendbar – es wäre großartig, wenn das virtuelle DOM stapelweise auf einmal geändert werden könnte. Aber was ist mit separaten, seltenen Updates? Solche

DOM-Updates führen zu einer bedeutungslosen Vorberechnung des virtuellen DOM.

V: Variablenmodell übergeben

VueJS-Ausdruck:

Schritte:

1 Zitat

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

2. Deklarieren Sie ein Stück HTML, das vom Framework verwaltet werden soll

<div id="myapp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

3 vue und füllen Sie die Vue-Parameter aus

I. Attribut: el deklariert die von vuejs verwaltete Grenzerweiterung: ng-app ist ähnlich (dies ist in AngularJS)

II . Attribut: Datendaten (Status | | Attribut), ein Attribut, das speziell einige Daten speichert. Die Daten müssen im Objektformat

<script type="text/javascript">
var vm = new Vue({
el:"#myapp",
data:{hello:"hello word vue app!",
message:"wyx",
result:{name:&#39;xinxin&#39;,password:&#39;123&#39;}
}
});
</script>

4 vorliegen . Ausdruck: Wir verwenden die Form {{}} Die Daten in data werden auf der Seite angezeigt,

Zum Beispiel:

data:{{message:'xxxxx '}}

view : {{message}}

<div id="myapp">
<ul>
<li>{{hello}}</li>
<li>{{message}}</li>
<li>{{result.name}}</li>
</ul>
</div>

In view: {{message}} bindet die Geben Sie den Code ein und zeigen Sie den Wert an

Daten Die Kernfunktion besteht darin, die auf der Seite angezeigten Daten (Modell) zu speichern (es wird eine Zuordnungsbeziehung zwischen dem erhaltenen Modell und dem Inhalt erstellt). Das heißt, wenn wir die Front-End- und Back-End-Interaktion implementieren, wird die Seite automatisch gebunden, sodass der Datenfluss vom Modell aus realisiert wird. ---->Ansicht.

3.VueJS-Befehl:

Befehl: Tatsächlich bedeutet dies, dass vue benutzerdefinierte Attribute definiert, die mit v- beginnen.

Nutzung der Anweisung: v-Anweisungsname = „Ausdrucksbeurteilung oder Modellattribut oder Ereignis“

V-Modell:

Funktion: Empfangen Einige vom Benutzer eingegebene Daten und direktes Mounten der Daten in das Datenattribut

Syntax: v-model ="attribute value" {attribute value: text value}

Verarbeitung in Daten: Definieren Sie diesen Attributwert am besten in Daten, sonst wird zu Beginn ein Fehler gemeldet

v-if:

Funktion: Feste Inhalte laden durch Urteil, laden, wenn wahr, Element löschen, wenn falsch

Verwendung: Wird in der Berechtigungsverwaltung verwendet, bedingtes Laden von Seitenmodulen

Syntax: v-if="Urteilsausdruck " wird auf die gleiche Weise verwendet, als ob

Eigenschaften: Das Einfügen oder Löschen von Steuerelementen wird nicht ausgeblendet

v -show:

Elemente werden immer gerendert und bleiben im Dom, und die Sicherheit ist nicht so hoch wie bei v-if, da die Verwendung von v-show die gleiche ist wie bei v-if, außer dass v-show die Elementanzeige festlegt bedeutet nicht, dass das Element direkt entfernt wird.

v-ifVS. v-show

一般来说，v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用v-if较好。

v-else

元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。

v-bind:

缩写：：

{{}}表达式绑定数据的时候，可以直接将数据显示在页面中（html）里面，

v-bind img src 属性，

作用：v-bind 给页面中html属性进行绑定

语法：v-bind：图片里面src属性=“data 中的图片地址”

如：

<img
v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:&#39;red&#39;,fontSize:&#39;30px&#39;}
}

   

缩写形式：

<img :src="img" />
<div :style="styles">style</div>

   

v-bind添加的style样式是添加在内联中的。

v-on：

缩写形式：v-on:click ---- >@click

@+事件

作用：对页面中的事件进行绑定 vue自定义了一套事件机制

angularjs中对pc端支持比较良好，对移动端支持一般，vue主要支持移动端，也支持pc端

事件开发中，事件 v-on: 绑定在页面（view）中，再vue实例里面，在methods中去监听

在页面中 我们做的行为： v-on:click="函数名称"

函数应该写在vue实例的methods属性里面

methods也要写成对象：

methods:{
clickBtn:function(){
}
}

   

例：f8901362721699ea6890ed926129bc8b点击65281c5ac262bf6d81768915a4a77ac0

methods:{
clickBtn:function(){
alert('触发了button绑定的事件');
}
}

   

在事件中传递值,事件中通过$event传递事件列表，在methods里面就可以直接获取事件列表里面的值

当一个行为所触发了一个事件，发生事件交互的时候所产生的一种结果(出现一个事件列表)

vue中的事件列表$event