Heim > Artikel > Web-Frontend > Was ist die Vue-Rendering-Methode?

Was ist die Vue-Rendering-Methode?

WBOYOriginal: 2022-03-18 16:44:345217Durchsuche

Die Methode ist: 1. Verwenden Sie die ursprüngliche Vorlagensyntax, um das Rendern bereitzustellen. 2. Verwenden Sie das Render-Attribut und die CreateElement-Funktion, um direkt mit dem Render-Attribut und der CreateElement-Funktion zu rendern das Render-Attribut, Rendern mit einzelnen Dateikomponenten.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist die Vue-Rendering-Methode?

Persönliche Zusammenfassung der Rendering-Methoden in Vue kann in 4 Typen unterteilt werden:

Original-Vorlagensyntax, montiertes Rendering
Render-Attribut verwenden, createElement-Funktion zum direkten Rendern

Verwenden Sie das Render-Attribut, kooperieren Sie mit dem Template-Attribut der Komponente, rendern Sie die Funktion „createElement“. Ursprüngliche Vorlagensyntax, Mount-Rendering, also Rendering in HTML. Wenn die Seite zurückkehrt, werden das V-Modell und andere Attribute im HTML nicht gerendert und unverändert an den Client gesendet. Der Client rendert diese Kennungen erst, wenn Vue geladen und die Instanz erstellt wird.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>TestVue</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <input v-model="message">
10     <p>Message is: {{ message }}</p>
11 </div>
12 </body>
13 <script src="js/vue.js"></script>
14 <script type="text/javascript">
15     var v = new Vue({
16         el: &#39;#app&#39;,
17         data: {
18             message: &#39;这是内容&#39;
19         }
20     });
21 </script>
22 </html>

Methode 2:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>TestVue</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9 </div>
10 </body>
11 <script src="js/vue.js"></script>
12 <script type="text/javascript">
13     var v = new Vue({
14         el: &#39;#app&#39;,
15         data: {
16             message: &#39;这是内容&#39;
17         },
18         render: function (createElement) {
19             return createElement(&#39;p&#39;, &#39;Message is:&#39; + this.message)
20         }
21     });
22 </script>
23 </html>

Methode 3:

Verwenden Sie zum Rendern das Render-Attribut, kooperieren Sie mit dem Template-Attribut der Komponente und der Funktion createElement.

Im Vergleich zur vorherigen Methode ist das Hinzufügen von Komponenten und die Verwendung des Vorlagenattributs intuitiver. Es enthält auch kein HTML und wird über die Renderfunktion gerendert.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>TestVue</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9 </div>
10 </body>
11 <script src="js/vue.js"></script>
12 <script type="text/javascript">
13     var MyComponent = {
14         data () {
15             return {
16                 message: &#39;这是内容&#39;
17             }
18         },
19         template: `
20         <div id="app">
21             <input v-model="message">
22             <p>Message is: {{ message }}</p>
23         </div>
24         `
25     };
26 
27     var v = new Vue({
28         el: &#39;#app&#39;,
29         components: {
30             &#39;my-component&#39;: MyComponent
31         },
32         render: function (createElement) {
33             return createElement(&#39;my-component&#39;)
34         }
35         //ECMAScript6: render: h => h(&#39;my-component&#39;)
36     });
37 </script>
38 </html>

zeichnet sich durch dynamisches Rendering und Modultrennung durch Komponenten aus. Die HTML-Vorlage ist jedoch in der Verwendung unpraktisch. Die IDE kann den Code nicht hervorheben und ist nicht für große Projekte geeignet.

Methode 4:

Verwenden Sie zum Rendern das Renderattribut, eine einzelne Dateikomponente und die Funktion „createElement“. Diese Methode ist die Rendering-Methode der meisten Vue-Projekte (das offizielle Gerüst verwendet diese Rendering-Methode). Wenn Sie vue CLI verwendet haben, sollten Sie damit vertraut sein. Die Merkmale sind Einzeldateikomponenten, Modularität, dynamisches Rendering und typische Einzelseitenanwendungen.

【Verwandte Empfehlung: „

vue.js Tutorial

“】

Das obige ist der detaillierte Inhalt vonWas ist die Vue-Rendering-Methode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript vue.js html JS ide

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：Wo spiegelt sich die Progressivität von Vue wider?Nächster Artikel：Wo spiegelt sich die Progressivität von Vue wider?

In Verbindung stehende Artikel

Mehr sehen