VUE [Erste Schritte]

Vue (ausgesprochen /vjuː/, ähnlich wie view) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen großen Frameworks ist Vue so konzipiert, dass es Schicht für Schicht von unten nach oben aufgetragen werden kann. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu verwenden, sondern auch leicht in Bibliotheken von Drittanbietern oder bestehende Projekte zu integrieren ist. Andererseits ist Vue in Kombination mit einer modernen Toolchain und verschiedenen unterstützenden Bibliotheken auch vollständig in der Lage, komplexe Single-Page-Anwendungen zu betreiben.

Progressiv: Erstellen Sie Projekte von einfach bis komplex

Vorteile von Vue

1. Die komprimierte Datei ist nur 33 KB
groß. 2. Die Betriebseffizienz ist höher. Es wird das DOM der virtuellen Maschine verwendet, eine Technologie, die die Daten über JavaScript vorberechnen, den endgültigen DOM-Vorgang berechnen und optimieren kann. Weil dieser DOM-Vorgang gehört zu den voreingestellten Verarbeitungsvorgängen, bei denen das DOM nicht tatsächlich betrieben wird, daher wird es als virtuelles DOM bezeichnet.
3. Durch die bidirektionale Datenbindung müssen Entwickler das DOM nicht mehr bedienen und mehr Erfahrung in das Geschäft einbringen.
4. Reichhaltige Ökologie Es gibt eine große Anzahl von Open-Source-Projekten auf dem Markt, die auf Vue basieren und ausgereift und stabil für die Entwicklung sind.

zwei Kernpunkte

(1) Responsive Datenbindung
Wenn sich die Daten ändern, wird die Ansicht automatisch aktualisiert, d.
(2) Kombinierte Ansichtskomponenten
Das heißt, die Seite wird schließlich einem Komponentenbaum zugeordnet, der mit einer Baumdatenstruktur entworfen wurde, die für die Wartung und Wiederverwendung geeignet ist.

Virtuelles DOM

Die dem realen DOM entsprechende Datenstruktur wird im Speicher generiert, und die im Speicher generierte Struktur wird als virtuelles DOM bezeichnet. Wenn sich Daten ändern, kann es die Mindestkosten für das erneute Rendern von Komponenten intelligent berechnen und auf DOM-Vorgänge anwenden.

MVVM

1) Buchstabenerklärung
1.M-Modelldaten
2.V-Ansichtsansicht
3.VM-Daten (Ansichtsmodell) und Ansichtssteuerung

2) Wenn sich die Seitendaten ändern, werden die Daten über die Dom-Überwachung an das Modell übergeben.
Wenn sich die Daten des Modells ändern, werden sie über die Datenbindung an die Seite gebunden

Deklaratives Rendering

Im Kern ist Vue.js ein System, das die deklarative Darstellung von Daten im DOM mithilfe einer prägnanten Vorlagensyntax ermöglicht.
Zusätzliche Ergänzung:
Das Rendern ist unterteilt in: imperatives Rendering und deklaratives Rendering.
Imperatives Rendering: Befehlen Sie unserem Programm, etwas zu tun, und das Programm folgt Ihrem Befehl, um das
deklarative Rendering Schritt für Schritt auszuführen: Sagen Sie dem Programm einfach, welchen Effekt Sie möchten. Der Rest bleibt dem Programm überlassen.
Spezifische Unterschiede finden Sie in den folgenden Codes. Die Ausführungsergebnisse sind die gleichen, aber die Implementierungsmethoden sind unterschiedlich.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>命令式渲染和声明式渲染</title>
		
	</head>
	<body>
		<script type="text/javascript">
			var arr = [1,2,3,4,5];
			// 命令式渲染：关心每步，关心流程，用命令去实现
			var newArr = [];
			for(var i = 0, len = arr.length; i < len; i++) {
				newArr.push(arr[i] * 2);
			}
			console.log(newArr);

			// 声明式渲染：不关心中间流程，只需要关心结果和实现条件
			var arr1 = arr.map(function(item) {
				return item*2;
			});
			console.log(arr1)
		</script>
	</body>
</html>

1. Erste Schritte mit Vue

1.1 Beispiel für den Einstieg

1. Installation

(1) CDN-Einführung

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(2) NPM-Installation

npm install vue

2. Hallo Welt

<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <!--第二步：引入Vue库-->
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
    <!--第三步:创建一个Div-->
    <div id="app">
        <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
        {
   
   {message}}
    </div>

    <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
    <script type="text/javascript">
        var app=new Vue({ // 创建Vue对象。Vue的核心对象。
            el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data:{    // data: 是Vue对象中绑定的数据
                message:'hello Vue!' // message 自定义的数据
            }
        })
    </script>
</body>
</html>

1.2 Interne Anweisungen

1、 v-if 、 v-else 、 v-else-if 、 v-show

Diese bedingten Anweisungen dienen zum Ein- und Ausblenden verschiedener Elemente und werden wie folgt verwendet:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构语法</title>
	</head>
	<body>
		<div id="app" align="center">
			<h1>根据根据分数评级</h1>
			<!-- v-if当判断条件成立时 div展现  控制dom元素增加 开销较大 -->
			<div v-if="score>=90">优秀</div>
			<div v-else-if="score>=80">良好</div>
			<div v-else-if="score>=70">中等</div>
			<div v-else>不及格</div>
			
			<!-- 直接渲染到页面中采用display: none;隐藏属性 如果频繁展现的元素 使用v-show -->
			<div v-show="flag">测试show数据</div>
			<button @click="flag= !flag">展现</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//定义分数
					score: 100,
					flag: false
				}
			})
		</script>
	</body>
</html>

Der Unterschied zwischen v-if und v-show

v-if: Die Ereignis-Listener und Unterkomponenten im Bedingungsblock werden während des Wechselvorgangs zerstört und entsprechend neu erstellt. Der Overhead ist hoch und wird verwendet, wenn sich die Laufzeitbedingung selten ändert.
v-show: Passen Sie die CSS-Anzeigeeigenschaft an, der Overhead ist gering und wird bei häufigem Wechsel verwendet.

2、v-für

(1) Grundlegende Verwendung

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--模板-->
<div id="app">
    <ul>
        <li v-for="item in items">
            {
   
   {item}}
        </li>
    </ul>
</div>
<!--js代码-->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[20,23,18,65]
        }
    })
</script>

</body>
</html>

(2) Objektdurchquerung

Parameter: Der erste ist der Wert, der zweite ist der Schlüsselname und der dritte ist der Index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script></head>
</head>
<body>
<!--模板-->
<div id="app">
    <ul>
        <li v-for="(value,key,index) in object">
            {
   
   { index }}. {
   
   { key }} - {
   
   { value }}
        </li>
    </ul>
</div>

<!--js代码-->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object:{
                firstName: 'John',
                lastName: 'Doe'
            }
        }
    })
</script>
</body>
</html>

3, V-Text, V-HTML

(1)V-Text

Der Wert von { {xxx}} hat einen Nachteil. Wenn die Netzwerkgeschwindigkeit langsam ist oder Javascript-Fehler auftreten, wird { {xxx}} auf der Seite angezeigt (Interpolationsflackern). Der von Vue bereitgestellte V-Text kann dieses Problem lösen

Rolle: Analysedaten direkt anzeigen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>

<div>
    {
   
   { message }}
</div>

<!--和下面的一样-->
<div v-test="message"></div>

</body>
</html>

(2) v-html

Daten zum Parsen von HTML

<!-- v-html指令  直接显示html效果 容易被攻击 本网站内可以使用
     第三方数据来源不要使用-->
<p v-html="html"></p>

4、v-on

(1) Konventionelle Verwendung

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>

<!--v-on常规用法-->
<div id="add">本场比赛得分: {
   
   {count}}
    <button v-on:click="add">加分</button>
</div>

<!--//JS-->
<script type="text/javascript">
    new Vue({
        el: '#add',
        data:{
            count: 1
        },
        methods: {
            add: function(){
                this.count++;
            }
        }
    });
</script>



</body>
</html>

(2) Abkürzung

<button @click="add">加分</button>

5、V-Modell

Verwendung: Erstellen Sie eine bidirektionale Bindung für ein Formularsteuerelement oder eine Formularkomponente. Wenn die JS-Daten geändert werden, ändert sich der Seiteninhalt. Wenn der Seiteninhalt geändert wird, ändern sich die Daten.

Die folgenden Modelle müssen alle Anfangswerte in Daten deklarieren

data: {
            message: "a",
            count: 1,
            status: [],
            sex: '男',
            selected: ''
        }

(1) Eingang

<input type="text" v-model="message">

(2)Textbereich

<textarea  cols="30" rows="10" v-model="message"></textarea>

(3)Kontrollkästchen

<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{
   
   {status}}</div>

(4) Radio

<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{
   
   {sex}}</div>

(5) auswählen

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<div>Selected: {
   
   { selected }}</div>

Der vollständige Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="message"/>
    <br>

    <textarea cols="30" rows="10" v-model="message"></textarea>
    <br>

    <input type="checkbox" id="first" value="1" v-model="status"/>
    <label for="first">有效</label>
    <input type="checkbox" id="second" value="2" v-model="status"/>
    <label for="second">无效</label>
    <div>状态:{
   
   {status}}</div>
    <br>

    <input type="radio" id="one" value="男" v-model="sex"/>
    <label for="one">男</label>
    <input type="radio" id="two" value="女" v-model="sex"/>
    <label for="one">女</label>
    <div>性别:{
   
   {sex}}</div>
    <br>

    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <div>Selected {
   
   { selected }}</div>
    <br>
</div>


<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: "a",
            count: 1,
            status: [],
            sex: '男',
            selected: ''
        }
    })
</script>
</body>
</html>

6、v-bind

Es wird verwendet, um dynamische Attribute von HTML-Tags zu verarbeiten, dh dynamische Zuweisungen.

(1) Allgemeine Verwendung

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-blind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>



</head>
<body>
    <div id="app">

        <img v-bind:src="imgSrc"   width="400px">

    </div>


    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                imgSrc: "../img/20220114112403.png"
            }
        })
    </script>
</body>
</html>

(2) Abkürzung

<img :src="imgSrc"  width="400px">

7、v-pre、v-cloak、v-once

(1)in-für

Verwendung: Überspringen Sie den Kompilierungsprozess dieses Elements und seiner untergeordneten Elemente. Kann verwendet werden, um rohe Moustache-Tags anzuzeigen. Das Überspringen vieler Knoten ohne Anweisungen beschleunigt die Kompilierung.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-pre>{
   
   { message }}</div>
    </div>


    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'A'
            }
        })
    </script>

</body>
</html>

(2) V-Umhang

Beschreibung:
Diese Anweisung verbleibt auf dem Element, bis die zugehörige Instanz die Kompilierung abgeschlossen hat. Bei Verwendung mit CSS-Regeln wie [v-cloak] { display: none } verbirgt diese Direktive nicht kompilierte Mustache-Tags, bis die Instanz bereit ist.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>


</head>

<body>
<style type="text/css">
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <div v-cloak>{
   
   {message}}</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: '欢迎使用'
        }

    })
</script>
</body>
</html>

(3)v-einmal

Verwendung:
Elemente und Komponenten nur einmal rendern. Bei nachfolgenden erneuten Renderings werden das Element/die Komponente und alle seine untergeordneten Elemente als statischer Inhalt betrachtet und übersprungen. Dies kann zur Optimierung der Update-Leistung genutzt werden.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <span v-once>{
   
   {message}}</span>
</div>

<script>
    new Vue({
        el:'#app',
        data: {
            message: '0'
        }
    })
</script>
</body>
</html>