Heim > Artikel > Web-Frontend > Was ist die Vue-Rendering-Methode?
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.
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: '#app', 17 data: { 18 message: '这是内容' 19 } 20 }); 21 </script> 22 </html>
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: '#app', 15 data: { 16 message: '这是内容' 17 }, 18 render: function (createElement) { 19 return createElement('p', 'Message is:' + 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: '这是内容'
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: '#app',
29 components: {
30 'my-component': MyComponent
31 },
32 render: function (createElement) {
33 return createElement('my-component')
34 }
35 //ECMAScript6: render: h => h('my-component')
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.
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!