Was ist die Vue-Rendering-Methode?-View.js-php.cn

Was ist die Vue-Rendering-Methode?

WBOY

Freigeben： 2022-03-18 16:44:34

Original

5253 Leute haben es durchsucht

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.

Was ist die Vue-Rendering-Methode?

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!